用axios结合element的upload进行文件上传

这里来说一下用upload提交文件的两种方式:
  1. 用action='url’方式
  2. 用:http-request方式提交,element官方的解释:http-request 覆盖默认的上传行为,可以自定义上传的实现

第一种体提交方式,直接在action属性中写出后台地址即可,但是这种方式无法获取后台响应结果。当然,如果想了解upload标签的更多属性,可到Element官方文档
要想提交后获取后台的相应结果,应该用第二种方式:


<el-upload class="upload-demo" action="string" :http-request="uploadFile" :limit="1" :show-file-list="false">
	<el-button size="small" type="primary">上传头像</el-button>
</el-upload>
 submit: function (param) {
      const formData = new FormData();
      formData.append("file", param.file);
      this.axios
        .post("http://localhost:8082/file/upload", formData, {
          "Content-type": "multipart/form-data",
        })
        .then((Response) => {        
          console.log(this.response.data);
        });
    },
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以实现。在使用 element uploadaxios 自定义上传时,可以通过监听 axios 的上传进度事件来更新 element upload 的进度条。具体实现步骤如下: 1. 在 element upload 中,将 show-file-list 属性设置为 false,禁止显示上传文件列表,原因是自定义上传时不需要 element upload 自己去上传文件。 2. 在 element upload 的 before-upload 方法中,将文件上传到服务器。在上传过程中,监听 axios 的上传进度事件,更新 element upload 的进度条。 示例代码如下: ```html <el-upload :show-file-list="false" :on-preview="handlePreview" :before-upload="handleUpload"> <el-button>点击上传</el-button> </el-upload> ``` ```javascript handleUpload(file) { const formData = new FormData(); formData.append('file', file); axios.post('/api/upload', formData, { onUploadProgress: progressEvent => { // 更新 element upload 的进度条 this.$refs.upload.uploadFiles.forEach(item => { if (item.raw === file) { item.percentage = (progressEvent.loaded / progressEvent.total) * 100; } }); } }).then(response => { // 上传成功 }).catch(error => { // 上传失败 }); } ``` 在上面的示例代码中,我们在 axiospost 请求中通过 onUploadProgress 监听上传进度事件,并更新 element upload 中对应文件的进度条。注意,在更新进度条时,需要通过 this.$refs.upload.uploadFiles 来获取 element upload 中已经添加的文件列表,并找到对应文件来更新进度条。 这样就可以在使用 element uploadaxios 自定义上传时,仍能实现 action 的进度效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值