vue 上传文件 和 下载文件

版权声明: https://blog.csdn.net/weixin_41722928/article/details/86364771

Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:
html:

<input type="file" value="" id="file" @change="uploadConfig">

注意这里的type是file,就表示是上传文件了

js:

复制代码

      uploadConfig(e) {
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        let url = this.$store.state.path + "api/tools/handle_upload_file";
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post(url,formData, config).then(function (response) {
          console.log(response.data)

        })

      }

复制代码

1. vue里面的axios,如果要用这种方式写,注意请求方式是method, 而不是 type:

复制代码

this.$axios({
          url:this.$store.state.path + "api/tools/handle_upload_file",
          method: "POST",    //  这个地方注意
          data: formData,
          file:e.target.files[0],
          processData:false,
          contentType:false,
          success:(response) => {
            console.log("upload_success_response:", response)
        }
        })

复制代码

2. 传输文件类型,必须加上请求头:   headers:{'Content-Type':'multipart/form-data'}
3. 注意axios的用法

后端(python):

猜你喜欢

转载自blog.csdn.net/weixin_41722928/article/details/86364771