为什么上传文件要使用multipart/form-data

最近遇到上传文件的需求：使用了elementui的upload组件:学到了很多知识，这里主要讲讲为什么必须构造表单数据，并使用multipart/form-data content type 请求头。

template:


<el-upload ref="upload"

          action=""

          :list-type="_content.listType"

          :file-list="uploadFileList"

          :on-change="fileChange"

          :multiple="_content.multiple"

          :limit="_content.multiple ? _content.limit||1000 : undefined"

          :on-exceed="onExceed"

          :accept="_content.accept ? _content.accept.join(',') : '*/*'"

          :http-request="uploadFile"

          :on-success="onMySuccess"

          :on-error="onMyError">

          <div v-if="_content.listType==='text' || _content.listType==='picture'">

            <el-button style="margin-top:10px;"

              type="primary"

              :loading="uploadBtnLoading" @click="onStartUpload"><i class="el-icon-upload el-icon--right" style="margin-right:10px;"></i>{{!uploadBtnLoading ? "点击上传" : `${successedFileCount}/${uploadFileList.length}个文件`}}</el-button>

          </div>

          <div slot="tip"

            class="el-upload__tip">{{langContent.tip}}</div>

          <el-progress :show-text="false"

            v-show="uploadBtnLoading"

            :percentage="allFilePercentage"></el-progress>

        </el-upload>

js:


uploadFile(option) {

      const formData = new FormData();

      formData.append('controlId', this.node.itemId);

      formData.append('file', option.file);

      formData.append('roleId', this.$refs.role.currentValue);

      this.uploadBtnLoading = true;

      this.combolistNode.configs.frontConfigs.style.disabled = true;

      let cancel;

      const promise = axios

        .request({

          // url: 'http://localhost:9898/m?udp=/udcontrols/udUploadBox/upload',

          url: 'm?udp=/udcontrols/uduploadBox/upload',

          method: 'post',

          data: formData,

          headers: { 'content-type': 'multipart/form-data' },

          cancelToken: new CancelToken(((c) => {

            // An executor function receives a cancel function as a parameter

            cancel = c;

          })),

          onUploadProgress: (progressEvent) => {

            const complete = (progressEvent.loaded / progressEvent.total) * 100;

            option.onProgress({ percent: complete });

          }

        });

      promise.abort = cancel;

      return promise;

    },

multipart/form-data定义源头

multipart/form-data最初由《RFC 1867: Form-based File Upload in HTML》文档定义。

Since file-upload is a feature that will benefit many applications, this proposes an
extension to HTML to allow information providers to express file upload requests uniformly, and a MIME compatible representation for file upload responses.

文档简介中说明文件上传作为一种常见的需求，在目前(1995年)的html中的form表单格式中还不支持，因此发明了一种兼容此需求的mime type。

The encoding type application/x-www-form-urlencoded is inefficient for sending large quantities of binary data or text containing non-ASCII characters. Thus, a new media type,multipart/form-data, is proposed as a way of efficiently sending the
values associated with a filled-out form from client to server.

文档中也写了为什么要新增一个类型，而不使用旧有的application/x-www-form-urlencoded：因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。

最后编辑于：2019.03.25 22:29:31