Vue+elementUI+七牛云上传

Vue+elementUI+七牛云上传

前言:关于图片上传的方式有很多,这里的是上传图片到后端,后端返回图片的url路径。

七牛云
1.进入官网新建账号
2.创建空间
3.分别找到自己账号下对应的信息,示例:
空间名:hnrunzhi
domain: https://upload-z2.qiniup.com
测试域名:qd8il0gj6.bkt.clouddn.com
ak:yv_v9PWI1D__Wqn_dYE2oOVeCSWO4tT5zXz0OiKu
sk:hf2c1TBJ7vEcc7RicB2yE_Peeqcf97Q8ED9dE6r4

后台
1.Pom.xml:

com.qiniu
qiniu-java-sdk
7.1.1

2.新建工具类(注意所有成员变量的值需要换成自己七牛云的相关信息)
Vue+elementUI+七牛云上传

3.新建FileController
Vue+elementUI+七牛云上传

前端
1.新建文件上传的组件
Vue+elementUI+七牛云上传

2.新建视图界面引入上面组件,并配置好路由

Vue+elementUI+七牛云上传

备注:如果用的是测试域名的话,那么它到了一定时间,是会回收的,如果是单纯的学习的话,前期是可以不用去注册域名的

Vue+elementUI+七牛云上传后端需要修改的部分:
Vue+elementUI+七牛云上传效果图:
先登录
Vue+elementUI+七牛云上传
再依次点击左侧树形菜单,然后点击上传文件
Vue+elementUI+七牛云上传Vue+elementUI+七牛云上传DEMO链接:百度网盘资源
提取码: 499k