上传文件以及文件上传的时候传参

最新推荐文章于 2024-09-07 14:21:25 发布

一个小开心呀

最新推荐文章于 2024-09-07 14:21:25 发布

阅读量1.1k

点赞数

文章标签： vue 图片上传

本文链接：https://blog.csdn.net/weixin_52753294/article/details/121264865

版权

本文对比了Vue项目中使用`$http`上传文件的两种方法：一是通过FormData上传文件并设置名称，二是利用FileReader预览后再POST。详细介绍了如何在imgUploadLogin方法中处理这两种上传策略。

摘要由CSDN通过智能技术生成

上代码：

:http-request="(file)=>imgUploadLogin(file, '上传的参数')"

这是upload组件的上传文件成功时的钩子。

文件上传一、

methods:{
	imgUploadLogin(file, name) {
		//name就是上传的参数
		let content = file.file;
        let data = new FormData();
        data.append('file', content);

        this.$http.post(api, data, true).then( res => {
            if( res.data.code == 1 ){
                this.file.name = res.data.data.fileOriginalName   //文件名称
                this.file.url = res.data.data.fileUrl		//文件路径
            }
        })
	}

}

图片上传二、

methods:{
	imgUploadLogin(file, name) {
		//name就是上传的参数
		let img = new Image();
        img.src = URL.createObjectURL(file.file);
        img.onload = () => {
             let param = new FormData();
             param.append("type", name); //这在里我穿的是类型，因为接口需要类型
             param.append("file", file.file);
             this.$http
             .post(api, param, true)
             .then(res => {
                 if(res.data.code === 1) {
                     this.$message({
                         showClose: true,
                         message: "上传成功",
                         type: "success"
                     });
                 } else {
                     this.$message({
                         showClose: true,
                         message: res.data.message,
                         type: "error"
                     });
                 }
             })
             .catch(err =>{
                 console.log(err);
             })
         }
	}

}