Element UI Upload上传图片方法

最新推荐文章于 2024-05-12 08:58:02 发布

后端接口写完了吗？

最新推荐文章于 2024-05-12 08:58:02 发布

阅读量277

点赞数

文章标签： ElementUI 上传图片回调函数图片管理前端开发

本文链接：https://blog.csdn.net/m0_66202404/article/details/126182277

版权

Element UI ：https://element.eleme.cn/#/zh-CN/component/upload

废话不多说直接上代码!!

<el-upload
   class="upload-demo"
   action="onLine/uploadPictures" //上传后台的url路径
   :on-success="handleSuccess" //成功后回调函数
   :on-exceed="addr_addImg"  //超出设置的上限后回调
   :on-remove="uploadDel"  //删除图片的回调函数
   :limit="9" //允许最大上传几张图片
   name="files" //后台接收的字段名称
   list-type="picture-card"
   :file-list="fileList" //图片列表数组
 >
   <div class="flex uploadIcon">
       <i class="el-icon-plus" style="margin-bottom: 10px"></i>
       <div style="line-height: 20px">添加照片</div>
   </div>
</el-upload>

一定要在data里声明fileList:[];

//上传图片
handleSuccess(res, file, fileList) {
    this.$message({
        message: "上传成功",
        type: "success",
    });
    // console.log(file, "file成功");
    // console.log(fileList, "fileList成功");
    var list = [];
    for (let i = 0; i < fileList.length; i++) {
    // console.log(fileList[i].response.data.servicePersonalWorkPhoto);
        if (!fileList[i].response) {
            list.push(fileList[i].url);
        } else {
            list.push(fileList[i].response.data.fileAddress);
            }
        }
        this.fileList = list;
        // console.log("上传成功后照片列表", this.fileList);
},
//删除图片
uploadDel(file, fileList) {
    // console.log(file, "文件删除file");
    // console.log(fileList, "文件删除fileList");
    var list = [];
    for (let i = 0; i < fileList.length; i++) {
        if (!fileList[i].response) {
            list.push(fileList[i].url);
        } else {
            list.push(fileList[i].response.data.fileAddress);
            }
     }
     // console.log(list, "删除后的数组");
     this.fileList = list.map((item) => {
        return {
            name: item,
            url: item,
        };
     });
    // console.log(this.fileList, "删除后的数组");
    // console.log(file.response.data.fileAddress);
},
// 超出图片上传数量
addr_addImg() {
    this.$message({
        type: "error",
        message: "图片总数超出范围",
    });
},