当前位置:   article > 正文

Vue使用WebUploader上传文件/压缩包_vue webuploader

vue webuploader

Vue使用WebUploader上传文件/压缩包

npm i webuploader -S
  • 1

引入

//引入webuploader
import WebUploader from "webuploader";
import "webuploader/dist/webuploader.css";
  • 1
  • 2
  • 3

页面

<el-row class="webUploader">
    <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
      <el-button
        class="selectFile"
        :disabled="disabled"
        type="primary"
        size="mini"
        ref="selectFile"
      >
        选择文件
      </el-button>
      <el-button
        @click="submitFile"
        :disabled="disabled"
        type="success"
        size="mini"
        >开始上传</el-button
      >
    </el-col>
    <el-col :span="24">
      <el-table :data="value" :disabled="disabled" size="mini">
        <el-table-column
          label="文件名"
          align="left"
          key="fileName"
          prop="fileName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="大小"
          align="center"
          key="fileSize"
          prop="fileSize"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="进度"
          align="center"
          key="fileProgress"
          prop="fileProgress"
        >
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.fileProgress"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          key="fileStatus"
          prop="fileStatus"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="resume(scope.row.file)"
              v-hasPermi="['system:user:edit']"
              :disabled="scope.row.fileStatus === '上传成功'"
              >开始</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-pause"
              @click="stop(scope.row.file)"
              :disabled="scope.row.fileStatus === '上传成功'"
              v-hasPermi="['system:user:remove']"
              >暂停</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              :disabled="disabled"
              @click="remove(scope.row, scope.$index)"
              v-hasPermi="['system:user:resetPwd']"
              >移除</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-camera"
              @click="imgLook(scope.row.fileId)"
              :disabled="scope.row.fileStatus !== '上传成功'"
              v-hasPermi="['system:user:resetPwd']"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103

用法

export default {
  name: "uploaderList",
  components: {},
  props: {
    accept: {
      type: [String, Object],
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: "url"
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default: 100
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 5120000
    },
    fileType: {
      type: String,
      default: "knowledge"
    },
    // 上传时传给后端的参数,一般为token,key等
    formData: {
      type: Object,
      default: () => {
        return { guid: null, code: 9 };
      }
    },
    // 生成formData中文件的key,下面只是个例子,具体哪种形式和后端商议
    keyGenerator: {
      type: Function,
      default: () => `${new Date().getTime()}`
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: ""
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      uploader: null
    };
  },
  watch: {
    disabled(newVal) {
      if (newVal) {
        this.uploader.destroy();
        return false;
      }
      this.initWebUpload();
    }
  },
  mounted() {
    if (!this.disabled) {
      this.initWebUpload();
    }
  },
  methods: {
    initWebUpload() {
      if (this.uploader) {
        this.uploader.destroy();
      }
      const uploader = (this.uploader = WebUploader.create({
        auto: false, // 选完文件后,是否自动上传
        // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
        //pick: { id: "#up_single", multiple: false },
          id: this.$refs.selectFile.$el, // 选择文件的按钮
          multiple: this.multiple // 是否多文件上传 默认false
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads: 3,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: true, //分片上传
        chunkSize: 5120000, //分片大小
        duplicate: true // 重复上传
        //上传文件格式
        //accept: {
         // extensions: "doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi",
        //  mimeTypes: ".doc,.docx,.pdf,.txt,.xls,.xlsx,.jpg,.png,.mp4,.avi",
       // },
         accept: {
          extensions: "zip,rar,ios,7z",
          mimeTypes: ".zip,.rar,.ios,.7z,",
        },
      }));
      const fun = [
        "fileQueued",
        "uploadStart",
        "uploadProgress",
        "uploadSuccess",
        "error"
      ];
      for (const item of fun) {
        uploader.on(item, this[item]);
      }
      return uploader;
    },
    // 当有文件被添加进队列的时候,添加到页面预览
    fileQueued(file) {
      const { name, size, id } = file;
      const obj = {
        id,
        fileName: name,
        fileSize: WebUploader.Base.formatSize(size),
        fileProgress: 0,
        fileStatus: "待上传",
        file
      };
      this.value.push(obj);
    },
    // 在这里可以准备好formData的数据
    uploadStart() {
      this.uploader.options.formData.guid = this.keyGenerator();
    },
    // 文件上传过程中创建进度条实时显示。
    uploadProgress(file, percentage) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      fileObj.fileStatus = "上传中";
      fileObj.fileProgress = parseInt(percentage * 100);
      fileObj.file = file;
    },
    // 文件上传成功
    async uploadSuccess(file, res) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      try {
        const { data } = await combine({
          guid: res.guid,
          fileName: file.name,
          fileType: this.fileType,
          code: res.code
        });
        fileObj.fileId = data.fileId;
        fileObj.fileStatus = "上传成功";
        this.$emit("input", this.value);
      } catch (err) {
        fileObj.fileProgress = 0;
        fileObj.fileStatus = "上传失败,请点击开始重新上传";
      }
    },
    error(type) {//报错信息
      let errorMessage = "";
      if (type === "F_EXCEED_SIZE") {
        errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
          (1024 * 1000)}M`;
      } else if (type === "Q_EXCEED_NUM_LIMIT") {
        errorMessage = "文件上传已达到最大上限数";
      } else {
        errorMessage = `上传出错!请检查后重新上传!错误代码${type}`;
      }
      console.error(errorMessage);
    },
    // 开始
    resume(file) {
      this.uploader.upload(file);
    },
    // 暂停
    stop(file) {
      file.fileStatus = "暂停中";
      this.uploader.stop(file);
    },
    // 移除
    async remove(row, idx) {
      const { fileId, file } = row;
      try {
        if (fileId) await delFileApi(fileId);
        this.value.splice(idx, 1);
        if (file) {
          // 取消并中断文件上传
          this.uploader.cancelFile(file);
          // 在队列中移除文件
          this.uploader.removeFile(file, true);
        }
        this.$emit("input", this.value);
      } catch (error) {}
    },
    // 预览
    imgLook(fileId) {
      if (!fileId) {
        return false;
      }
      lookImg(fileId).then(res => {
        const sourceImages = [];
        sourceImages.push({
          thumbnail:
            process.env.VUE_APP_BASE_API +
            this.profile +
            res.data.thumbnailFile,
          source:
            process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
        });
        // console.log(sourceImages);
        this.$refs.viewer.show(sourceImages, 0);
      });
    },
      //上传文件格式
    getAccept(accept) {
      switch (accept) {
        case "text":
          return {
            title: "Texts",
            exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",
            mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
          };
        case "video":
          return {
            title: "Videos",
            exteensions: "mp4",
            mimeTypes: ".mp4"
          };
        case "image":
          return {
            title: "Images",
            exteensions: "gif,jpg,jpeg,bmp,png,tif",
            mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"
          };
        default:
          return accept;
      }
    },
    submitFile() {
      this.uploader.upload();
    }
  }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247

引入组件

//引入
import UploaderList from "@/components/upload/uploadList.vue";
components: { UploaderList },
//使用
 <UploaderList
    v-model="imageList"
    :formData="{ guid: null, fileCategory: 1, code: 7 }"
    :fileType="'targetFacility'"
/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/66646
推荐阅读
相关标签