ファイルアップロード関連の知識

ファイルのアップロード

参考記事@hiraiyuan

ポイント1:

• FormData() オブジェクトの例。

ポイント2:

• アップロード中に取得したファイルを formdata オブジェクトに追加します。

ポイント3:

• アップロードインターフェースのリクエストヘッダーを設定します。

方法 1: フォーム送信ファイル (ネイティブ)

<el-button @click="getFile" style="margin-top: 10px">
  <i class="el-icon-upload"></i>&nbsp;{
   
   {$i18n.t('CLICK_UPLOAD')}}
</el-button>
<input
  type="file"
  ref="file"
  style="display: none;"
  v-on:change="handleFileUpload($event)"
/>

ファイルファイルを取得

let formData = new FormData();
let file = this.$refs.file.files[0];
formData.append(file, file);
// 调用接口

postUpload(formData).then(() => {
    
    });

インターフェース構成リクエストヘッダーのアップロード

// 文件上传
export function postUpload(file) {
    
    
  return axios({
    
    
    url: "upload",
    method: "post",
    data: file,
    headers: {
    
    
      "Content-Type": "multipart/form-data",
    },
  });
}

方法 2: Elementui でカプセル化されたコンポーネント送信ファイル (vue)

注: アップロード インターフェイスではリクエスト ヘッダーを構成する必要があります

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="onUpload"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

// 上传文件
onUpload (file) {
    
    
    let formData = new FormData()
    formData.append('file',file.file)
    postUpload(formData).then((res) => {
    
    
       console.log(res)
        this.$message.success(this.$t('UPLOAD_SUCCESS'))
    }).catch((e) => {
    
    
        this.$message.error(e.message)
    })
},