文件缩略图按官方文档说的是使用
scoped-slot
去设置缩略图模版。且需要上传的是图片,因为有预览等功能,如果上传的不是图片,会显示不出来。
<el-upload
:action="uploadFileServiceUrl"
list-type="picture-card"
:on-success="(response, file, fileList) => {handleSuccess(response, file, fileList)}"
:file-list="fileList"
accept="image/jpg,image/jpeg,image/png"
:before-upload="handleBeforeUpload"
ref="upload"
:auto-upload="true"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- <span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span> -->
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
这里设置了图片的格式等,用户在选择的时候,会自动校准图片格式,官方文档中提供了before-upload方法,可以防止用户在选择文件的时候使用查看所有文件的方式。
完整代码:
<el-upload
:action="uploadFileServiceUrl"
list-type="picture-card"
:on-success="(response, file, fileList) => {handleSuccess(response, file, fileList)}"
:file-list="fileList"
accept="image/jpg,image/jpeg,image/png"
:before-upload="handleBeforeUpload"
ref="upload"
:auto-upload="true"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- <span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span> -->
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
export default {
name: "",
data() {
submitForm4: {
fileIdList: []
},
uploadFileServiceUrl: 'xxx', // 文件上传的接口地址
},
methods: {
handleSuccess(response, file, fileList){
response.data.forEach((item,index) => {
this.submitForm4.fileIdList.push(item.fileID)
})
},
// 判断上传的是否为图片
handleBeforeUpload(file) {
var img = file.name.substring(file.name.lastIndexOf('.') + 1)
const suffix = img === 'jpg'
const suffix2 = img === 'png'
const suffix3 = img === 'jpeg'
// const isLt1M = file.size / 1024 / 1024 < 1;
if (!suffix && !suffix2 && !suffix3) {
this.$message.error("只能上传图片!");
return false
}
// 可以限制图片的大小
// if (!isLt1M) {
// this.$message.error('上传图片大小不能超过 1MB!');
// }
return suffix || suffix2 || suffix3
},
handleRemove(file,fileList) {
const uploadFiles = this.$refs.upload.uploadFiles;
for (let i in uploadFiles) {
if (file.url === uploadFiles[i].url) {
uploadFiles.splice(i, 1);
}
}
// console.log(uploadFiles,'uploadFilesuploadFiles')
this.getFileID(uploadFiles)
},
getFileID(fileList){
let deleFileId = []
fileList.forEach((item,index) => {
console.log(index,item.response.data)
item.response.data.forEach((item,index) => {
// console.log(index,item)
deleFileId.push(item.fileID)
})
})
this.submitForm4.fileIdList = deleFileId
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
}
}
这里删除的时候需要注意的是,缩略图中,删除时没有整体的fileList参数,所以需要使用ref来获取所有上传的图片列表,这样子在删除的时候,就可以确定用户删除的,是哪一张图片了。
最后,附上删除时利用ref获取到的数组格式
版权归原作者 前端傻小子 所有, 如有侵权,请联系我们删除。