前后端联调的下的文件上传

1.前端处理
ps：action里面为后端的文件上传接口地址；

    <el-upload
      action="http://mall-fire.oss-cn-shenzhen.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
    </el-upload>

beforeUpload方法

import http from '@/utils/httpRequest.js'
export function policy () {
    
    
  return new Promise((resolve, reject) => {
    
    
    http({
    
    
      url: http.adornUrl('/third/party/oss/policy'),
      method: 'get',
      params: http.adornParams({
    
    })
    }).then(({
     
      data }) => {
    
    
      resolve(data)
    })
  })
}

import {
    
     policy } from './policy'
//上面是policy方法的来由
    beforeUpload (file) {
    
    
      let _self = this
      return new Promise((resolve, reject) => {
    
    
        policy()
          .then(response => {
    
    
            // console.log("这是什么${filename}");
            _self.dataObj.policy = response.data.policy
            _self.dataObj.signature = response.data.signature
            _self.dataObj.ossaccessKeyId = response.data.accessid
            _self.dataObj.key = response.data.dir + getUUID() + '_${filename}'
            _self.dataObj.dir = response.data.dir
            _self.dataObj.host = response.data.host
            resolve(true)
          })
          .catch(err => {
    
    
            console.log('出错了...', err)
            reject(false)
          })
      })
    },

2.后端处理

2.1参数处理

ps：重点在于后端返回的格式是怎样的；

前端的action那块有一个接口，通过这个接口看到；

要么后端直接返回前端需要的格式，要么前端自行封装一下后端传递的数据；

前端需要传递的参数

files *string

后端返回的数据

通过这样的方式

{
  "code": 0,
  "data": {
    "id": 0,
    "name": "string",
    "visitUrl": "string"
  },
  "msg": "string",
  "success": true
}

2.2上传的两种方式

2.2.1上传到Linux服务器

上传的路径自己生成

public static final String UPLOAD_PATH_BASE = "/home/rose/uploads";

 public static String uploadFile(Part part, String allowedExts, String dir)
            throws IOException, NotSupportedFileTypeException {
    
    
        String extraPath = DateUtil.format(new Date(), "yyyyMMdd");

        //1.判断是否为空
        if (part == null) {
    
    
            return null;
        }

        //2.生成文件名 [uuid.ext]
        String original = getFileNameByPart(part);
        String ext = FileUtil.extName(original);
        if (StrUtil.isEmpty(ext) || !allowedExts.contains(ext))
            throw new NotSupportedFileTypeException("Not Supported File Type: " + ext);
        String path = extraPath + File.separator + SecureUtil.simpleUUID() + "." + ext;
        //3.创建必要的目录
        File tmpFile = new File(dir);
        if (!tmpFile.exists()) {
    
    
            tmpFile.mkdirs();
        }

        //4.写入磁盘
        String fullPath = dir + File.separator + path;
        //part.write(path); //需要配置临时路径
        //saveFileFromInputStream(part.getInputStream(),dir,name);
        FileUtil.writeFromStream(part.getInputStream(),fullPath);

        return path;
    }

2.2.2上传到oss阿里云服务器

  //上传头像到oss
    @Override
    public String uploadFileAvatar(MultipartFile file) {
    
    
        // 工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POIND;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;

        try {
    
    
            // 创建OSS实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

            //获取上传文件输入流
            InputStream inputStream = file.getInputStream();
            //获取文件名称
            String fileName = file.getOriginalFilename();

            //1 在文件名称里面添加随机唯一的值
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            // yuy76t5rew01.jpg
            fileName = uuid+fileName;

            //2 把文件按照日期进行分类
            //获取当前日期
            //   2019/11/12
            String datePath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            //  2019/11/12/ewtqr313401.jpg
            fileName = datePath+"/"+fileName;

            //调用oss方法实现上传
            //第一个参数  Bucket名称
            //第二个参数  上传到oss文件路径和文件名称   aa/bb/1.jpg
            //第三个参数  上传文件输入流
            ossClient.putObject(bucketName,fileName , inputStream);

            // 关闭OSSClient。
            ossClient.shutdown();

            //把上传之后文件路径返回
            //需要把上传到阿里云oss路径手动拼接出来
            //  https://edu-guli-1010.oss-cn-beijing.aliyuncs.com/01.jpg
            String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
            return url;
        }catch(Exception e) {
    
    
            e.printStackTrace();
            return null;
        }
    }