Vue上传图像到阿里云OSS对象存储

总结前台和后台上传图片到阿里云OSS。

前台

在根目录中写一个request的js文件，封装请的地址

import axios from "axios";
const service = axios.create({
    
    
  baseURL: 'http://localhost:8083/',
  timeout: 10000
})
// 把service导出
export default service

在src下的api中写一个请求的js 如写一个uploadphoto.js：

import request from '../utils/request'

const group_name = 'photo'

let data = {
    
    
    setphoto(params){
    
    
        return new request({
    
    
            url:`${
    
    group_name}/setphoto`,
            data:params,
            method:'post',
        })
    }
}
export default data

再写一个组件，用于测试图片上传。
formData 可以把文件写成二进制，并且封装起来，传送给后台。

<template>
  <div>
    <br /><br /><br /><br /><br />
    <el-upload
      class="avatar-uploader"
      action="#"
      :http-request="setphoto"
      :auto-upload="true"
      :show-file-list="false"
    >
      <i class="el-icon-plus avatar-uploader-icon">上传学号对应的图片</i>
    </el-upload>
    <br /><br /><br /><br /><br />
    <input type="text" v-model="number" />
    <h2>学号：{
    
    {
    
     number }}</h2>
  </div>
</template>


<script>
import setphoto from "@api/uploadPhoto"
export default {
    
    
  data() {
    
    
    return {
    
    
      number: "请输入学号",
    };
  },
  methods: {
    
    
    setphoto(params) {
    
    
      let formData = new FormData();
      formData.append("multipartFile", params.file);
      formData.append("number", this.number);
      setphoto.setphoto(formData);
      console.log(params.file);
    },
  },
};
</script>

后台

在utils中写SssUtils工具

如：

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;

public class OssUtil {
    
    


    private static String accessKeyId = "在自己的云端查看accessKeyId ";

    private static String accessKeySecret = "在自己的云端查看accessKeySecret ";

    private static String endpoint = "自己的服务器地址";




    public static OSS getOssClient(){
    
    
        return new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    }
}

service中写上传图片的接口和实现类

接口：

import org.springframework.web.multipart.MultipartFile;

public interface SetPhotoService {
    
    

    void SetPhoto (MultipartFile multipartFile, Integer number);
}

实现类：

@Service
public class SetPhotoServiceImpl implements SetPhotoService {
    
    


    private static String urlPrefix = "云服务器地址";

    @Resource
    MydetailsMapper mydetailsMapper;


    @Override
    public void SetPhoto(MultipartFile multipartFile, Integer number) {
    
    
        OSS ossClient = OssUtil.getOssClient();

        Calendar calendar = Calendar.getInstance();

        String imagePath = calendar.get(Calendar.YEAR) +
                "/" + StringUtils.leftPad(String.valueOf(calendar.get(Calendar.MONTH) + 1), 2, '0')+
                "/" + StringUtils.leftPad(String.valueOf(calendar.get(Calendar.DAY_OF_MONTH)), 2, '0')+
                "/" + UUID.randomUUID().toString() + "." +  multipartFile.getOriginalFilename().split("\\.")[1];

        try {
    
    
            PutObjectRequest putObjectRequest = new PutObjectRequest("ngyst",imagePath,new ByteArrayInputStream(multipartFile.getBytes()));
            ossClient.putObject(putObjectRequest);
        } catch (IOException e) {
    
    
            e.printStackTrace();
        }finally {
    
    
            ossClient.shutdown();
        }

        String mypicture = urlPrefix+imagePath;

        mydetailsMapper.updatePhoto(mypicture,number);

        System.out.println(number+"---------"+mypicture);
    }
}

在实现类中上传了图片并且把地址写在了数据库对应的属性中。

在controller中写对应前台的mapper路径和方法：

扫描二维码关注公众号，回复： 13179986 查看本文章

@RestController
@RequestMapping("photo")
public class SetPhotoController {
    
    

    @Resource
    private SetPhotoServiceImpl setPhotoService;

    @RequestMapping("setphoto")
    public void setphoto(MultipartFile multipartFile, Integer number){
    
    
        setPhotoService.SetPhoto(multipartFile,number);
    }
}