element-ui图片上传功能（也适用于多张图片）

爱敲代码的婷婷婷.

已于 2023-05-16 10:38:10 修改

阅读量4.2k

点赞数 5

文章标签： vue.js javascript elementui Powered by 金山文档

于 2023-02-28 15:34:09 首次发布

本文链接：https://blog.csdn.net/weixin_73318685/article/details/129247153

版权

<el-upload
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   list-type="picture"
   action="https://jsonplaceh.com/posts/"
   :file-list="add_ObjDetails"
   style="display: inline-block; margin-left: 30px"
   :http-request="imgUpload"
   :before-upload="beforeAvatarUpload"
   :limit='1'
   :on-exceed="handleExceed"
   :before-remove="beforeRemove"
   accept=".jpg,.jpeg,.png,.JPG,.JPEG"
>
    <el-button
       size="small"
       type="primary"
    >上传图片</el-button>
</el-upload>
<script>
   data(){
    return{
        add_ObjDetails=[]
    }
   },
    //点击文件列表中已上传的文件时的钩子
   handlePreview(file) {
      console.log("file--->", file);
   },
    // 删除图片
   handleRemove(file, fileList) {
      // 点击删除图片，获取图片文件file,
      // 筛选出图片文件file.url和图片数组的url一致的数据
      // 删除掉这个数据
      this.add_ObjDetails.filter((item,index) => {
        if (item.url == file.url) {
          this.add_ObjDetails.splice(index, 1);
        }
      });
    },
   //上传图片
   imgUpload(e) {
      // e 图片文件
      let file = e.file;
      // new 一个FormData 表单
      let FormDatas = new FormData();
      // 加一个 键 multipartFile值是图片文件
      FormDatas.append("multipartFile", file);
      // 把FormDatas作为参数调接口  图片接口的作用：把文件类型的图片转为公司链接形式的图片
      api.CommonUpload_uploadImagesTX(FormDatas, "media/").then((res) => {
        if (res.status == 200) {
          console.log("res.data", res.data);
          // 创造一个对象 键为url 值为后端返回的img链接
          let imgObj = {
            url: res.data,
          };
          // 把创造的对象加到图片数组中
          this.add_ObjDetails.push(imgObj);
        } 
      });
   },
   handleExceed(files,fileList){
      this.$message.warning(`当前限制选择 1 个图片，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //限制上传图片大小
   beforeAvatarUpload(){
    //待补充
    }
</script>