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.新建工具类(注意所有成员变量的值需要换成自己七牛云的相关信息)
3.新建FileController
前端
1.新建文件上传的组件
2.新建视图界面引入上面组件,并配置好路由
备注:如果用的是测试域名的话,那么它到了一定时间,是会回收的,如果是单纯的学习的话,前期是可以不用去注册域名的
后端需要修改的部分:
效果图:
先登录
再依次点击左侧树形菜单,然后点击上传文件
Vue+elementUI+七牛云上传DEMO链接:百度网盘资源
提取码: 499k