el-upload图片上传OSS vue+springboot 简单好copy(代码全)

简单使用

文章目录

目录

使用步骤

1.后端（springboot）

创建项目文件（仅供参考）

UploadUtil.java

UploadController.java

2.前端（vue2+elementUI）

创建项目文件（仅供参考）

ImgsUpload.vue(封装组件)

HomeView.vue（调用显示组件

---

一、项目资源链接

https://download.csdn.net/download/qq_60781770/87743941?spm=1001.2014.3001.5501

使用效果

使用步骤

1.后端（springboot）

引入依赖：

	com.aliyun.oss
	aliyun-sdk-oss
	3.10.2


	com.alibaba.cloud
	spring-cloud-alibaba-commons
	2.2.7.RELEASE

创建项目文件（仅供参考）

结构树：

UploadUtil.java

package com.bdqn.util;

import com.alibaba.cloud.commons.lang.StringUtils;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;

public class UploadUtil {

    //域名(开头需要https://，结尾要/)  获取地址：https://oss.console.aliyun.com/bucket/
    private static final String ali_domain = "https://bucketName.oss-cn-shenzhen.aliyuncs.com/";
    //地域节点(开头需要http://)
    private static final String endpoint = "http://oss-cn-shenzhen.aliyuncs.com";
    private static final String accessKeyId = "【你的accessKeyId】";
    //↑ ↑ ↑ ↑ ↑  密钥获取地址 https://ram.console.aliyun.com/manage/ak ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
    private static final String accessKeySecret = "【你的accessKeySecret】";
    //作为存放的文件夹，通过前端传入的下标id判断图片放哪个文件夹（主要是为了方便分类管理，也可以不搞）
    private static final String[] typeList = {"goods", "comment", "head", "background","session"};
    private static final String bucketName = "【你的oss自定义存储桶名】";

    /**
     * 上传文件
     * @param file 文件对象
     * @param typeIndex 选择存放的文件夹
     * @param id 作为2级文件夹（如用户id，商品id）
     * @param uid 前端传入的el-upload生成的uid作为文件名
     * @return 图片链接
     * @throws Exception
     */
    public static String uploadImg(MultipartFile file, Integer typeIndex, Integer id, long uid) throws Exception {
        //生成的文件名（类型文件夹/关联id/uid.文件后缀）
        String fileName = String.format("%s/%d/%d%s", typeList[typeIndex], id, uid, file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")));
        //OSS客户端对象
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        //上传
        ossClient.putObject(
                bucketName, //仓库名
                fileName, //文件名
                file.getInputStream());
        //关闭连接
        ossClient.shutdown();
        //返回链接
        return ali_domain + fileName;
    }

    /**
     * 删除文件
     * @param url 链接
     * @return
     */
    public static boolean remove(String url) {
        //将前缀截掉
        String str = StringUtils.substringAfter(url, ali_domain);
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        //删除图片
        ossClient.deleteObject(bucketName, str);
        //关闭连接
        ossClient.shutdown();
        return true;
    }

}

UploadController.java

package com.bdqn.controller;

import com.bdqn.util.UploadUtil;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

//解决前端跨域
@CrossOrigin
@RestController
public class UploadController {

    @PostMapping("/upload")
    public String upload(MultipartFile file, Integer type, Integer id, long uid) throws Exception {
        return UploadUtil.uploadImg(file, type, id, uid);
    }

    @RequestMapping("/remove")
    boolean remove(String url) {
        return UploadUtil.remove(url);
    }

}

2.前端（vue2+elementUI）

npm安装elementUI包

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/installationnpm安装axios和vue-axios

npm i axios vue-aixos

创建项目文件（仅供参考）

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import vueAxios from "vue-axios";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(vueAxios, axios);
Vue.use(ElementUI);
axios.defaults.baseURL = "http://127.0.0.1:22222/";

Vue.config.productionTip = false;

new Vue({
	router,
	render: (h) => h(App),
}).$mount("#app");

ImgsUpload.vue(封装组件)

HomeView.vue（调用显示组件）