博客

今天用了一下upload这个上传组件，遇到了一些问题，记录一下，可能还是不熟练的原因吧。

直接上代码吧：

页面部分：

    <el-form-item label="宣传视频：">
        <el-upload
          v-model="value.url"
          class="upload-demo"
          :limit="limitNum"
          accept=".mp4,.wmv,mov,flv"
          :action="uploadUrl"
          drag
          :before-upload="handleBeforeUpload"
          :before-remove="beforeRemoveFile"
          :on-success="onSuccess"
          :on-exceed="exceedFile"
          :auto-upload="true"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或点击上传文件
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">视频大小不超过30M</div>
        </el-upload>
      </el-form-item>

这里有一个action，而且是必填属性，刚开始我一直是用import引入自己封装的上传文件的接口进来，因为是一个函数，所以一直会报错，说需要一个string类型的。



由于upload的action会直接调用你提供的接口，不需要再自己写方法，所以只要给一个url就可以

uploadUrl:'ip:8080/video/add',

但是，如何动态获取服务器的IP我还没找到方法，所以就直接写成固定的值在代码里面。

method里面的代码：

 // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: "警告",
        message: `只能选择 ${
          this.limitNum
        } 个文件，当前共选择了 ${files.length + fileList.length} 个`
      });
    },
    handleBeforeUpload(file){
      const isLt30M = file.size <  1024 * 1024 * 30;
      if (!isLt30M) {
        this.$message.error('上传的视频大小不能超过 30MB!');
        return;
      }
      return isLt30M;
    },
    beforeRemoveFile(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }文件吗？`);
    },
    onSuccess(res,file){
      if(res.code==200){
        this.value.url=res.data.data;
        this.$message.success("视频上传成功");
      }else{
        this.$message.error("视频上传失败，请重新上传");
      }
    },

当用户选择好视频就会自动调用后端上传视频的接口。