elementplus 上传文件

一、 form-data格式上传代码示例如下：

<el-upload 
 	class="upload-img" 
	action=""
	:on-remove="handleRemove"
	:before-upload="beforeUpload"
	list-type="picture"
	:file-list="fileList"
>
	<el-button size="small" type="danger">点击上传</el-button>
</el-upload>

// 使用上传文件之前的钩子来进行自定义文件上传
beforeUpload(file,id) {
    let fd = new FormData()
    fd.append('file', file)
    const obj = {
        name:'',
        file:''
    }
    dataSet.fileList = []
    axios.post('/api/common/upload', fd, {
        headers: {
        'Content-Type': 'multipart/form-data'
        }
    }).then(res=>{
    	// 上传成功，返回图片完整路径
        console.log(res);
    })
	// 阻止默认的上传操作, 就不会产生如下图action为空报404错误的情况
	return false;
},

二、从File对象中读取图片数据 (base64格式) 示例

//图片转64格式
//处理上传的图片
getFile(file, fileList){
    console.log(file)
    methods.getBase64(file.raw).then(res => {
        // dataSet.imgObj.name = file.name;
        // dataSet.imgObj.file= res
    }).then(()=>{
        console.log(dataSet.imgObj);
        axios.post('/api/common/upload', file, {headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
            console.log(res);
        })
        // uploadImg(dataSet.imgObj).then(res=>{
        //     console.log(res);
        // })
    })

},
//图片转64
getBase64(file) {
    return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
        imgResult = reader.result;
        };
        reader.onerror = function(error) {
        reject(error);
        };
        reader.onloadend = function() {
        resolve(imgResult);
        };
    });
},

参考文章