文件上传

基础使用

<input type="file" />

vue2.x

<template lang="pug">
input(ref="file", type="file", name="file", style="display: none", @change="inputChange")
</template>

<script>
export default {
    methods: {
        /*点击打开上传选择框 start*/
        async clickUpload() {
          // 每次选取图片名的时候,清空旧数据
          if (this.$refs.file.value) {
            // 清空input
            this.$refs.file.value = "";
          }

          this.$refs.file.click();
        },
        
        /* 包装form */
        async inputChange() {
          let _input = this.$refs.file;
          let _file = _input.files[0];

          let _fromData = new FormData();
          _fromData.append("saveDir", this.form.factory_name);
          _fromData.append("file", _file);

          let res = await this.$http.post(this.$api.uploadFactoryLogo, _fromData, {
            headers: { "content-type": "multipart/form-data" },
          });

          if (!res) {
            _input.files = [];
            return this.$message.error("上传头像失败");
          }

          let { data, meta } = res.data;

          if (meta.success) {
            this.$message.success("上传头像成功");
            this.form.factory_logo = data.url;
            this.previewImgUrl = `${data.hostname}/${data.url}`;
          }
        },
};
</script>