Vant文件上传组件,使用Ajax上传
- 说明:vant 是有赞团队,基于vue 2.0 封装的一个H5组件。规范请求方式,应该用 promose ES 语法实现。但无奈还是新手。所以只能用Ajax来进行,接口请求。
- 下面贴出代码:
- H5部分
<van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" :max-size="5 * 1024 * 1024" @oversize="onOversize" multiple/>
- ajax请求:
afterRead(file) {// 此时可以自行将文件上传至服务器var data = new FormData();data.append('file', file.file);var vm = this;vant.Toast.loading({message: '上传中...',forbidClick: true,});$.ajax({type: 'POST',url: "/api/XX/uploadImg", data: data,cache: false,processData: false,contentType: false,success: function (ret) {vant.Toast.success('上传成功');console.log(ret.data);vm.picurl=ret.data;},error: function (xhr, errorType, error) {vant.Toast.fail('Ajax request error, errorType: ' + errorType + ', error: ' + error)}});console.log(file);}
亲测可用!有问题欢迎指导。