elementUI中图片上传upload组件,上传图片数据到后台

结构:

        <el-upload
          :action="api.base+api.uploadotherpic"
          list-type="picture-card"
          :file-list="fileList"
          with-credentials
          :before-upload="beforeUpload"
          :on-remove="afterRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

上传:

 beforeUpload(file) {
      var code = store.state.shop_code;
      let fd = new FormData();//通过form数据格式来传
      fd.append("picFile", file); //传文件
      fd.append("shop_code", code); //传其他参数
      var url = api.uploadotherpic;
      this.$http
        .post(url, fd)
        .then(res => {
          console.log(res.data);
          let data = res.data;
          if (data.code == 200) {
            this.$message({
              message: "上传成功",
              type: "success"
            });

            //再次请求数据,实现本地与服务器内容一致,解决图片删除失败的bug
            var code = store.state.shop_code;
            this.getImgs(code);//封装好的请求后台图片的axios请求
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(error => {
          // console.log(error);
        });
    },

//结合上一片博文:axios封装

 

对于elementui的多个上传组件,可以通过以下步骤实现上传功能: 1. 在Vue组件引入elementui的上传组件: ```html <el-upload class="upload-demo" action="/upload" :on-success="handleSuccess" :limit="3" :multiple="true" :auto-upload="false"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 其,`:limit="3"`表示最多可以上传3个文件,`:multiple="true"`表示允许多选文件,`:auto-upload="false"`表示不自动上传文件。 2. 在Vue组件内定义`handleSuccess`方法,用于处理上传成功的回调函数: ```javascript methods: { handleSuccess(response, file, fileList) { console.log(response); } } ``` 在这个方法,你可以根据服务器返回的响应数据来进行相应的处理,比如展示上传成功的图片。 3. 在后台使用Multipart[ ]数组接收上传的文件: 根据你提供的引用的说明,后台可以使用Multipart[ ]数组来接收上传的文件。具体的实现方式会根据你使用的后台语言和框架而有所不同。一般来说,你可以使用后台提供的文件上传功能来处理接收到的文件。 通过以上步骤,你就可以实现使用elementui的多个上传组件来上传文件了。注意根据你的实际需求,可以根据elementui的文档来调整上传组件的配置。<span class="em">1</span> #### 引用[.reference_title] - *1* [Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)](https://download.csdn.net/download/weixin_38643141/13133634)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值