|
| xqd
@@ -1,271 +0,0 @@
|
|
|
-<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>
|
Sunny Feng