el-upload はファイルをアップロードし、ファイル名が変更された後にリクエストを送信します。

 自動アップロード:false      

:on-change="ハンドル変更"

 <el-upload
      multiple
      :auto-upload="false"
      :action="uploadImgUrl"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      ref="imageUpload"
      :on-remove="handleDelete"
      :show-file-list="true"
      :headers="headers"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :class="{hide: this.fileList.length >= this.limit}"
      accept="image/jpeg,image/png"
      :on-change="handleChange"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    
    <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip" v-if="showTip">
      请上传
      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{
   
   { fileSize }}MB</b> </template>
      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{
   
   { fileType.join("/") }}</b> </template>
      的文件
    </div>

ファイル名を変更する方法 (ファイル名に多くの特殊記号が含まれていると、ファイルのアップロードでエラーが報告されます): 

  handleChange(file) {
        let fileArr =file.name.split('.'); 
        let name=fileArr[0];
        let fileType=fileArr[1];

         let Exp=/[\-\_\,\!\|\~\`\(\)\#\@\]\[\$\%\^\&\*\{\}\:\;\"\L\<\>\?]/g;
         name = name.replace(Exp,"");
        let f = new File([file.raw],name+'.'+fileType);
        f.uid = file.uid; // new File 没有uid属性,会导致组件底层报错,这里手动加上
        file.raw = f;  // 用f替换file的数据
        console.log(file.raw)
        this.$refs.imageUpload.submit(); // 手动触发上传
      },

おすすめ

転載: blog.csdn.net/Holly31/article/details/131241273