vuecli3.0使用elementui的upload组件以及遇到的问题

//元素
<el-upload 
class="upload-demo" 
ref="upload" 
:limit="1" 
:http-request="ImgUploadSectionFile"
:with-credentials="true" :auto-upload="true" 
accept=".png, .jpg, .gif, .svg" action>
<el-button slot="trigger" type="primary">选取图片</el-button>
</el-upload>

//data
data(){
    return {
        myfile: "",
        imgSrc: "
    }
}

//方法
ImgUploadSectionFile(param) {
	this.myfile = param.file
	console.log(param)
	this.imgSrc = URL.createObjectURL(param.file)
	// console.log(this.imgSrc)
},

//连接后台接口
formdata.append("id", this.ruleForm.id)  //这里是我表格中的每条数据对应的id
formdata.append("file", this.myfile)
axios.post(getRootPath() + "projectInfoController/updataProjectInfoById", formdata).then(res => {
	// console.log(res)
})

切记:使用elementui的upload单独上传文件时千万不能使用ajax,因为ajax不支持单独传输流文件选哟结合表单一起使用。这里要使用axios。否则会报(Uncaught (in promise) TypeError: Illegal invocation)

猜你喜欢

转载自blog.csdn.net/qq_41687299/article/details/107761639
今日推荐