element UI 上传的实现

上element UI官网先把代码复制一份

<el-upload
  class="upload-demo"
  drag
  上传路径的两种方式
  :action="uploadImgUrl"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

加一些通用的方法，他们即在上述代码中添加，也在methods中添加。

• :on-success=“handleUploadSuccess”
• :before-upload=“handleBeforeUpload”
• :on-error=“handleUploadError”
  这些加不加无所谓，但是为了看起比较有成就感，我把返回的数据输出了一下。

handleUploadSuccess(res) {
                this.uploadUrlPath = JSON.stringify(res);
                this.loading.close();
            },
 handleBeforeUpload() {
    this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
    });
},
handleUploadError() {
    this.$message({
        type: "error",
        message: "上传失败",
    });
    this.loading.close();
},

handleBeforeUpload()这个方法可以修改一下，判断上传文件的类型。

比如：

if (fileType !== '.jpg' & fileType !== '.bmp' & fileType !== '.gif' & fileType !== '.jpg' & fileType !== '.jpeg' & fileType !== '.png') {
        this.$message({
          type: "error",
          message: "上传图片的格式错误",
        });
        return false;
      }

上传路径的设置

在vue中配置路径

uploadImgUrl:  "/v1/admin/common/upload",

在项目配置文件中配置路径。

根据自己的项目，配置

  profile: D:/CodeTrain/uploadPath/

	血的教训：别用\\    最后一定要加/

方法

这里使用了免费开源的niua框架

try {
            // 上传文件路径
            String filePath = NiuaConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            Map<String, String> prams = new HashMap<String, String>();
            prams.put("fileName", fileName);
            prams.put("url", url);
            return ResultJson.ok(prams);
        } catch (Exception e) {
            return ResultJson.failure(ResultCode.BAD_REQUEST, e.getMessage());
        }

部分配置

上传文件的类型在框架的配置部分设置

 public static final String[] DEFAULT_ALLOWED_EXTENSION = {
            // 图片
            "bmp", "gif", "jpg", "jpeg", "png",
            // word excel powerpoint
            "doc", "docx", "xls", "xlsx", "ppt", "pptx", "html", "htm", "txt",
            // 压缩文件
            "rar", "zip", "gz", "bz2",
            //视频
            "mp4","MP4",
            // pdf
            "pdf" };

具体是想要图片类型还是视频类型，可以在前端进行上传时判断。