H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue大文件上传组件选哪个好?

vue支持大文件上传的组件有好几个,哪个比较成熟稳定一点的?对后端的api有什么要求?后端用的是django-rest-framework

https://github.com/lian-yue/v…
https://github.com/FineUpload…
https://github.com/simple-upl…

回答:

我也一直找组件,但是后来,自己网上找了一个上传方法,组件的话哪个交互好就选哪个,自己写一个也行。代码贴上:

 /*选择上传图片切换 这个是methods里的,注意uploadImg*/
    onFileChange(e){
        var self=this;
        var fileInput=e.target;
        if(fileInput.files.length==0){
            return;
        }
        this.editor.focus();
        uploadImg(fileInput.files[0], "uploadimage" ,this.action, (result)=>{
            if(result.status == 'error') this.$message.error(result.msg);
            else {
                console.log(result);
                self.editor.insertEmbed(self.editor.getSelection().index, 'image', result.url);
            }
        });
    },

下面的是uploadImg方法,方便引入

```
/*@params :文件 input的名字 后端的上传地址 上传完毕后回调函数*/
export function uploadImg(file,inputName,action,cb) {
const isAllow = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isAllow) {
    cb({ "status" : 'error' , 'msg' : '上传的图片须是 JPG、PNG 或 GIF 格式' });
    return ;
}
if (!isLt2M) {
    cb({ "status" : 'error' , 'msg' : '上传的图片大小不能超过 2MB' });
    return ;
}
var data = new FormData;
let formData = new FormData();
formData.append(inputName, file);
let config = {
    headers: {'Content-Type': 'multipart/form-data'},
    params: {
        "action": "uploadimage",
        'filename': inputName
    }
};
axios.post( action , formData, config).then(function (res) {
    cb(res);
    return ;
});

}

本文地址:H5W3 » vue大文件上传组件选哪个好?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址