vue -element-ui 文件上传upload 组件 实现 及其后台

1、前台

action 不用改 ：https://jsonplaceholder.typicode.com/posts/

 <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="fileList"
              :http-request="getFile"
            >
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-button size="small" type="success" @click="upload">确认上传</el-button>

getFile: 获取文件

data(){
  return {
   file: {},
   fileList: []
      }
     }
     
//上传方法
 getFile(item) {
      console.log(item.file)
      this.file = item.file
    },
    upload() {
    const fd = new FormData();
      fd.append("filename", this.file);
      const config = { headers: { "Content-Type": "multipart/form-data" } };
      this.$ajax
        .post("/gateway/basedata/center/subject/uploading", fd, config)
        .then(
          response => {
            this.$message.success(response.data.head.message);
            var url = response.data.body.data;
            this.addForm.imageUrl = url;
            this.editForm.imageUrl = url;
            console.log(url);
          },
          function() {
            this.addForm.imageUrl = "";
            console.log("error");
            console.log("total查询失败");
          }
        );
    },

  //弹窗的照片处理
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log("图片预览：");
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    handleChange(file, fileList) {
      fileList.splice(0);
      fileList.push(file);
      let formData = new FormData();
      formData.append("file", file);
      console.log(formData.getAll("file"));
      this.addForm.imageUrl = file.url;
      this.editForm.imageUrl = file.url;
      console.log("editForm图片地址：" + this.editForm.imageUrl);
      console.log("addForm图片地址：" + this.addForm.imageUrl);
    },

2、后台

1）控制器代码
  @PostMapping(value = "/uploading")
    public @ResponseBody
    CommonResponse<Integer> uploadFile(@RequestParam("filename") MultipartFile file) throws Exception {
        File file1 = FileUtil.multipartFileToFile(file);
        String url = UploadImage.upImage(file1);

        log.info("图片新地址：" + url);
        String message = "成功上传图片";
        CommonResponse<Integer> commonResponse = buildCommponResponse("1", null, message, 1, url);
        log.info(commonResponse.toString());
        return commonResponse;
    }
  （2）  文件工具类
   package boss.bes.basedata.myutil;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;

public class FileUtil {
    /**
     * MultipartFile 转 File
     *
     * @param file
     * @throws Exception
     */
    public static File multipartFileToFile(MultipartFile file) throws Exception {

        File toFile = null;
        if (file.equals("") || file.getSize() <= 0) {
            file = null;
        } else {
            InputStream ins = null;
            ins = file.getInputStream();
            toFile = new File(file.getOriginalFilename());
            inputStreamToFile(ins, toFile);
            ins.close();
        }
        return toFile;
    }

    //获取流文件
    private static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 删除本地临时文件
     * @param file
     */
    public static void delteTempFile(File file) {
        if (file != null) {
            File del = new File(file.toURI());
            del.delete();
        }
    }

}
（3）上传至OSS的部分代码
     /**
     * 上传图片至OSS
     * @param file 上传的文件
     * @return String 返回的唯一MD5数字签名
     * */
    public static  String upImage(File file) {
        String resultStr = null;
        try {
            //以输入流的形式上传文件
            InputStream is = new FileInputStream(file);
            //文件名
            String fileName = file.getName();
            String[] files = fileName.split("\\.");
            SimpleDateFormat tempDate = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            String datetimes = tempDate.format(new Date());
            fileName = files[0]+"-"+datetimes+"."+files[1];
            //文件大小
            Long fileSize = file.length();
            //创建上传Object的Metadata
            ObjectMetadata metadata = new ObjectMetadata();
            //上传的文件的长度
            metadata.setContentLength(is.available());
            //指定该Object被下载时的网页的缓存行为
            metadata.setCacheControl("no-cache");
            //指定该Object下设置Header
            metadata.setHeader("Pragma", "no-cache");
            //指定该Object被下载时的内容编码格式
            metadata.setContentEncoding("utf-8");
            //文件的MIME，定义文件的类型及网页编码，决定浏览器将以什么形式、什么编码读取文件。如果用户没有指定则根据Key或文件名的扩展名生成，
            //如果没有扩展名则填默认值application/octet-stream
            metadata.setContentType(getContentType(fileName));
            //指定该Object被下载时的名称（指示MINME用户代理如何显示附加的文件，打开或下载，及文件名称）
            metadata.setContentDisposition("filename/filesize=" + fileName + "/" + fileSize + "Byte.");
            //上传文件   (上传文件流的形式)
            PutObjectResult putResult = ossClient.putObject(bucketName, folder + fileName, is, metadata);
            //解析结果
            resultStr = putResult.getETag();
            resultStr = getURL("image/"+fileName);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return resultStr;
    }

（

3、效果演示