七牛云上传图片并返回图片URL

1.七牛云注册登录

https://portal.qiniu.com/signup/choice
在这里插入图片描述
完成实名认证,传身份证正反面之等,大概一个小时左右就认证成功了

2.新建存储空间

在这里插入图片描述
在这里插入图片描述
地区可以自己选择
在这里插入图片描述

3.代码

在pom.xml添加七牛云依赖

<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>7.1.1</version>
</dependency>

七牛云图片操作工具类

import cn.hutool.core.util.StrUtil;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import com.qiniu.util.Base64;
import com.qiniu.util.StringMap;
import com.qiniu.util.UrlSafeBase64;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;

import java.io.IOException;

public class QiniuCloudUtil {
    // 设置需要操作的账号的AK和SK
    private static final String ACCESS_KEY = "你的AK";
    private static final String SECRET_KEY = "你的sk";

    // 要上传的空间
    private static final String bucketname = "你的空间名称";

    // 密钥
    private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

    private static final String DOMAIN = "你的图片上传路径";

    private static final String style = "自定义的图片样式";

    public String getUpToken() {
        return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));
    }

    // 普通上传
    public String upload(String filePath, String fileName) throws IOException {
        // 创建上传对象
        UploadManager uploadManager = new UploadManager();
        try {
            // 调用put方法上传
            String token = auth.uploadToken(bucketname);
            //判断字符串为空的工具类,可用自己的
            if (StrUtil.isEmpty(token)) {
                System.out.println("未获取到token,请重试!");
                return null;
            }
            Response res = uploadManager.put(filePath, fileName, token);
            // 打印返回的信息
            System.out.println(res.bodyString());
            if (res.isOK()) {
                Ret ret = res.jsonToObject(Ret.class);
                //如果不需要对图片进行样式处理,则使用以下方式即可
                //return DOMAIN + ret.key;
                return DOMAIN + ret.key + "?" + style;
            }
        } catch (QiniuException e) {
            Response r = e.response;
            // 请求失败时打印的异常的信息
            System.out.println(r.toString());
            try {
                // 响应的文本信息
                System.out.println(r.bodyString());
            } catch (QiniuException e1) {
                // ignore
            }
        }
        return null;
    }


    //base64方式上传
    public String put64image(byte[] base64, String key) throws Exception {
        String file64 = Base64.encodeToString(base64, 0);
        Integer l = base64.length;
        String url = "http://upload.qiniu.com/putb64/" + l + "/key/" + UrlSafeBase64.encodeToString(key);
        //非华东空间需要根据注意事项 1 修改上传域名
        RequestBody rb = RequestBody.create(null, file64);
        Request request = new Request.Builder().
                url(url).
                addHeader("Content-Type", "application/octet-stream")
                .addHeader("Authorization", "UpToken " + getUpToken())
                .post(rb).build();
        //System.out.println(request.headers());
        OkHttpClient client = new OkHttpClient();
        okhttp3.Response response = client.newCall(request).execute();
        System.out.println(response);
        //如果不需要添加图片样式,使用以下方式
        //return DOMAIN + key;
        return DOMAIN + key + "?" + style;
    }


    // 普通删除(暂未使用以下方法,未测试)
    public void delete(String key) throws IOException {
        // 实例化一个BucketManager对象
        BucketManager bucketManager = new BucketManager(auth);
        // 此处的6666是去掉:http://你的图片上传路径/,剩下的key就是图片在七牛云的名称
        key = key.substring(6666);
        try {
            // 调用delete方法移动文件
            bucketManager.delete(bucketname, key);
        } catch (QiniuException e) {
            // 捕获异常信息
            Response r = e.response;
            System.out.println(r.toString());
        }
    }

    class Ret {
        public long fsize;
        public String key;
        public String hash;
        public int width;
        public int height;
    }
}

4.获取需要操作的账号的AK和SK

进入个人中心-密钥管理
在这里插入图片描述
在这里插入图片描述

5.获取要上传的空间

自己设置的空间名
在这里插入图片描述

6.获取图片上传URL路径

在这里插入图片描述
获取自定义的图片样式
private static final String style = “自定义的图片样式”;
我这里是需要给图片添加水印,所以自定义了图片样式,如果对于上传图片没有格式要求,则可以跳过此步骤。

7.后端代码调用

@ResponseBody
    @RequestMapping(value="/uploadImg", method=RequestMethod.POST)
    public ResultInfo uploadImg(@RequestParam MultipartFile image, HttpServletRequest request) {
        ResultInfo result = new ResultInfo();
        if (image.isEmpty()) {
            result.setCode(400);
            result.setMsg("文件为空,请重新上传");
            return result;
        }

        try {
            byte[] bytes = image.getBytes();
            String imageName = UUID.randomUUID().toString();

            QiniuCloudUtil qiniuUtil = new QiniuCloudUtil();
            try {
                //使用base64方式上传到七牛云
                String url = qiniuUtil.put64image(bytes, imageName);
                result.setCode(200);
                result.setMsg("文件上传成功");
                result.setInfo(url);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return result;
        } catch (IOException e) {
            result.setCode(500);
            result.setMsg("文件上传发生异常!");
            return result;
        }
    }

8.前端代码调用

VUE代码

uploadImg: async function(id) {  
    var vm = this;
    var fileInput = document.getElementById("uniqueId");  
    var formData = new FormData();
    formData.append("image", fileInput.files[0]);
    this.$axios({
        method: "post",
        url: '/api/article/uploadImg',
        data: formData
    }).then((response) = >{
        if (response.data.code == 200) {
            //后端返回的url地址
            var url = response.data.info;
            if (url != null && url.length > 0) {   
                vm.addImgRange = vm.$refs.myQuillEditor.quill.getSelection();
                var index = vm.addImgRange != null ? vm.addImgRange.index: 0;   vm.$refs.myQuillEditor.quill.insertEmbed(index, 'image', url);  
            } else {
              this.$Message.error("图片添加失败!");  
            }
        } else {
            this.$Message.error(response.data.msg);
        }
    });   
}
  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
在 Vue 中使用七牛云进行图片上传,需要先在七牛云申请一个空间并获取 Access Key 和 Secret Key,然后安装相关的依赖库。 1. 安装依赖库: ``` npm install qiniu-js vue-qiniu-upload --save ``` 2. 在 Vue 中引入依赖: ``` import QiniuUpload from 'vue-qiniu-upload' import * as qiniu from 'qiniu-js' ``` 3. 在 Vue 组件中使用: ``` <template> <div> <qiniu-upload :domain="domain" :access-key="accessKey" :secret-key="secretKey" :path="path" :size="size" :accept="accept" :before="beforeUpload" :complete="uploadComplete" :error="uploadError" > <button>上传图片</button> </qiniu-upload> </div> </template> <script> export default { components: { QiniuUpload }, data () { return { domain: 'your-qiniu-domain', accessKey: 'your-access-key', secretKey: 'your-secret-key', path: '/upload', size: 10 * 1024 * 1024, accept: 'image/*' } }, methods: { beforeUpload (file) { // 可以在这里进行一些上传前的操作,比如图片压缩等 }, uploadComplete (res) { // 上传完成后的回调 console.log('上传完成', res) }, uploadError (err) { // 上传失败的回调 console.log('上传失败', err) } } } </script> ``` 以上代码中,`QiniuUpload` 组件是我们刚才引入的依赖库中提供的,通过传入相关参数就可以进行图片上传了。在 `beforeUpload` 方法中可以对图片进行一些处理,比如压缩等操作。`uploadComplete` 和 `uploadError` 分别是上传成功和上传失败后的回调函数,可以进行一些相关的操作。 注意,上传图片之前需要在七牛云中进行配置,具体可以参考七牛云的文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云上上云

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值