|
| xqd
@@ -0,0 +1,271 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-upload
|
|
|
+ :action="action"
|
|
|
+ :file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ :headers="headers"
|
|
|
+ :limit="limit"
|
|
|
+ :accept="accept"
|
|
|
+ :data="data"
|
|
|
+ :class="hideUpload || uploading ? 'hideUpload' : ''"
|
|
|
+ :on-error="handleError"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ drag
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <div class="text-center p-2">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.file_type ? (file.file_type === 'image' ? file.url : '/images/file/' + file.file_type + '.png') : '/images/file/pdf.png'"
|
|
|
+ alt="" />
|
|
|
+
|
|
|
+ <span
|
|
|
+ v-if="file.status === 'success'"
|
|
|
+ class="el-upload-list__item-actions"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="preview"
|
|
|
+ class="el-upload-list__item-preview"
|
|
|
+ @click="handlePreview(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="download"
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleDownload(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="deleted"
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleRemove(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ :class="[
|
|
|
+ uploading ? 'uploading' : '',
|
|
|
+ 'el-upload-list__item-actions',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <i class="el-icon-loading" /><i style="font-size: 14px">上传中</i>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div style="word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;">{{ file.created_at.substr(0,10) + '-' + file.name+'.'+file.ext }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="previewVisible">
|
|
|
+ <img width="100%" :src="previewImgUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FileUpload',
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: () => {
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 上传的地址
|
|
|
+ action: {
|
|
|
+ type: String,
|
|
|
+ default: '#',
|
|
|
+ },
|
|
|
+ // 设置上传的请求头部
|
|
|
+ headers: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 上传文件大小限制， 默认 50M，单位M
|
|
|
+ size: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 50,
|
|
|
+ },
|
|
|
+ // 文件上传格式， 默认jpeg, png,jpg
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: 'image/jpeg,image/png',
|
|
|
+ },
|
|
|
+ // 是否显示删除操作按钮
|
|
|
+ deleted: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否显示预览操作按钮
|
|
|
+ preview: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 是否显示下载操作按钮
|
|
|
+ download: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 上传文件个数限制，默认0 不限制
|
|
|
+ limit: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [], // 默认文件列表
|
|
|
+ hideUpload: false, // 超出限制掩藏上传按钮
|
|
|
+ uploading: false, // 是否上传中,上传时隐藏上传按钮
|
|
|
+ previewImgUrl: '', // 预览图片地址
|
|
|
+ previewVisible: false, // 是否显示预览
|
|
|
+ get_url: '',
|
|
|
+ save_url:'',
|
|
|
+ del_url: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if(this.type == 'apply'){
|
|
|
+ this.get_url = `user/folder/${this.data.folder_id}/file/list`
|
|
|
+ this.save_url = `user/folder/${this.data.folder_id}/file`,
|
|
|
+ this.del_url = `user/folder/file`
|
|
|
+ } else {
|
|
|
+ this.get_url = `user/${this.data.user_id}/file/list?type=${this.data.type}`
|
|
|
+ this.save_url = `user/file`
|
|
|
+ this.del_url = `user/file`
|
|
|
+ }
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData() {
|
|
|
+ const res = await this.$axios.$get(
|
|
|
+ this.get_url
|
|
|
+ )
|
|
|
+ if(res){
|
|
|
+ this.fileList = res.files
|
|
|
+ console.log(this.fileList)
|
|
|
+ this.handleChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async uploadFile(data){
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append("file", data.file);
|
|
|
+ if(data.data.type){
|
|
|
+ formData.append("type", data.data.type);
|
|
|
+ }
|
|
|
+ formData.append("user_id", data.data.user_id);
|
|
|
+ try{
|
|
|
+ let res = await this.$axios.$post(
|
|
|
+ this.save_url,
|
|
|
+ formData
|
|
|
+ )
|
|
|
+ this.fileList.push(res)
|
|
|
+ console.log(this.fileList)
|
|
|
+ } catch (e) {
|
|
|
+ if (!e.response) return
|
|
|
+ const { data, status } = e.response
|
|
|
+ this.$message.error(`(${status}) ${this.$helper.extractError(data)}`)
|
|
|
+ } finally {
|
|
|
+ this.handleChange()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传前文件大小判断
|
|
|
+ beforeUpload(file) {
|
|
|
+ const { size } = this
|
|
|
+ const overSize = size > 0 && file.size < 1024 * 1024 * size
|
|
|
+ if (!overSize) this.$message.error(`上传文件大小不能超过 ${size}MB!`)
|
|
|
+ this.uploading = overSize // 是否上传中
|
|
|
+ return overSize
|
|
|
+ },
|
|
|
+ // 上传出错返回
|
|
|
+ handleError(event, file, fileList) {
|
|
|
+ console.log(event, file, fileList, 'error')
|
|
|
+ this.$message.error('服务出错，上传失败！')
|
|
|
+ this.handleChange()
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ async handleRemove(file) {
|
|
|
+ this.$confirm(`确认删除 ${file.name+'.'+file.ext} 文件?`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ const { fileList } = this
|
|
|
+ this.fileList = fileList.filter((item) => item.uid !== file.uid)
|
|
|
+ let res = await this.$axios.$delete(
|
|
|
+ this.del_url + '/' + file.id
|
|
|
+ )
|
|
|
+ this.handleChange()
|
|
|
+ }).catch(()=>{})
|
|
|
+ },
|
|
|
+ // 图片预览
|
|
|
+ handlePreview(file) {
|
|
|
+ window.open(file.url, "_blank");
|
|
|
+ /*
|
|
|
+ this.previewImgUrl = file.url
|
|
|
+ this.previewVisible = true
|
|
|
+ */
|
|
|
+ },
|
|
|
+ handleChange(file, list) {
|
|
|
+ const { limit, fileList } = this
|
|
|
+ if (limit > 0 && fileList.length >= limit) this.hideUpload = true
|
|
|
+ else this.hideUpload = false
|
|
|
+ this.uploading = false
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+ window.open(file.url, "_blank");
|
|
|
+ /*const a = document.createElement('a')
|
|
|
+ a.href = file.url
|
|
|
+ a.click() // 模拟点击事件，实现图片文件的同源下载
|
|
|
+ */
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.hideUpload .el-upload--picture-card {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.el-upload-list--picture-card .uploading.el-upload-list__item-actions {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+/*添加、删除文件时去掉动画过渡*/
|
|
|
+.el-upload-list__item {
|
|
|
+ transition: none !important;
|
|
|
+}
|
|
|
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
|
|
|
+ width: 108px;
|
|
|
+ height: 128px;
|
|
|
+}
|
|
|
+.el-upload-list--picture-card .el-upload-list__item {
|
|
|
+ background-color: inherit;
|
|
|
+ border: none;
|
|
|
+ width: 158px;
|
|
|
+ height: 208px;
|
|
|
+}
|
|
|
+</style>
|
