前端上传文件-＜el-upload＞

皮卡大人

已于 2022-07-19 09:58:18 修改

阅读量809

点赞数

文章标签：前端 typescript

于 2022-07-14 14:58:41 首次发布

本文链接：https://blog.csdn.net/qq_46057218/article/details/125555939

版权

el-upload：文章重点讲这个组件的使用
参考地址：https://element.eleme.cn/#/zh-CN/component/upload

描述：前端框架-VUE，TS-语言，后端框架-Flask
前端上传文件给后端，el-element组件里面就有现成的了，不需要写那些据麻烦的东西了。

先上代码：
前端样式

      <el-form-item label="">
        <el-upload class="upload-demo" ref="upload" :multiple="true" :data="data" action="/api/file/upload_image" :file-list="fileList" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>
    </el-form>

<script lang="ts">
import { Vue, Component, Ref, Watch } from "vue-property-decorator";
import { ElUpload } from "element-ui/types/upload";

interface File {
  name: string;
  url: string;
}

@Component({ name: "UploadImage", components: {} })
export default class UploadImage extends Vue {
  fileList: Array<File> = [];
  value = [];
  data = {};

  @Ref("upload")
  upload!: ElUpload;

  @Watch("value")
  addData(): void {
    this.data = { guid: this.value[2] };
  }

  submitUpload(): void {
    if (this.value !== []) {
      this.upload.submit();
    } else this.$message.warning(`请先选择摄像头`);
  }
}
</script>

因为阉割了一些代码，只保留了部分，只看重点就行了el-upload标签里面的属性，data上传文件附加的数据，后端用用form接收，action发送地址这个，:file-list发送数据列表，:auto-upload是否自动上传。
this.upload.submit() 上传文件和数据，:on-success返回成功的钩子，:on-error返回失败值的钩子。
还有其他许多功能看自己需求绑定。