VUE 多图片上传预览删除

最新推荐文章于 2024-03-03 00:56:21 发布

zhang8907xiaoyue

最新推荐文章于 2024-03-03 00:56:21 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/zhang8907xiaoyue/article/details/109067402

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在 Vue 项目中使用 Element UI 的 Upload 组件实现图片上传功能，包括设置上传头、限制数量、预览和删除图片，以及在提交表单时处理图片信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

二、页面代码

<el-upload
                ref="upload"
                accept='image/jpeg,image/gif,image/png'
                :auto-upload="true"
                :headers="upload.headers"  //头部，含token
                :action="upload.url"
                :limit="upload.limit"  //上传图片张数限制
                :multiple="upload.multiple"  //是否允许上传多张
                list-type="picture-card"  //卡片式布局，还有其他类似列表式布局，参考官网
                :on-preview="handlePreview"  //预览事件
                :on-remove="handleOutlineRemove" //删除图片
                :on-success="handleOutlineSuccess" //上传成功
                :file-list="upload.outlineFileList"> //存储图片的变量，回显时使用
                <i class="el-icon-plus"></i>
              </el-upload>


 <!-- 图片预览对话框 -->
    <el-dialog title="图片预览" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

三、script

import { getToken } from "@/utils/auth";

export default {
  name: "ProductInfo",
  data() {
    return {
      //图片预览对话框是否显示
      dialogVisible: false,
      //图片预览地址
      dialogImageUrl: "",
      // 图片上传
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        //上传图片个数限制
        limit: 5,
        multiple: true,
        outlineFileList: [],//传输插件存储的附件路径内容，提交和回显时赋值使用
      },
   }
}


    //上传图片-图片预览
    handleOutlinePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleOutlineSuccess(response, file, fileList) {
      this.upload.outlineFileList=fileList;//将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交

    }，
    //概要图片移除事件
    handleOutlineRemove(file, fileList) {
      this.upload.outlineFileList=fileList; //将最新的图片数组（系统插件控制的）赋值给提交时绑定的变量，方便数据跟进和提交
      this.$message({
        type: 'info',
        message: '已删除原有图片',
        duration: 1000
      });
    },

四、新增和修改提交代码部分

var productPicInfoList=[];//图片实体数组
for(var i=0;i<this.upload.outlineFileList.length;i++){
           
 productPicInfoList.push({picDesc:this.upload.outlineFileList[i].name,picUrl:this.upload.outlineFileList[i].response.fileName,isMaster:0,picOrder:i});//将图片数据的数据转成后台对应实体类格式
}

this.form.productPicInfoList=productPicInfoList;//图片实体list放入form表单提交即可

五、修改是回显

this.upload.outlineFileList.push({name:response.data.productPicInfoList[i].picDesc,url:this.filePath+response.data.productPicInfoList[i].picUrl,response:{fileName:response.data.productPicInfoList[i].picUrl}});//注意：插件绑定的outlineFileList（1）在用户上传时，插件放入的object主要部分格式是{name:'',response:{fileName:url路径}}（2）回显时需要的Object是{name:'',url:url路径}，否则不显示，即前面的response.fileName不回显，所以需要后台的数据赋值成{name:'',url:url路径,response:{fileName:url路径}}，兼顾回显和回显后用户删除再新加图片时list实体格式不一致