1、使用element-UI上传组件
<el-upload
:action="domain" //上传的地址
:before-upload="beforeUpload" //上传文件之前的执行的函数
:auto-upload="true" //是否在选取文件后立即进行上传
accept="image/jpeg,image/gif,image/png" //允许上传的类型
:http-request="upqiniu" //覆盖默认的上传行为,可以自定义上传的实现
:on-remove="moveimg" //文件列表移除文件时的钩子
>
</el-upload>
data() {
return {
blog: {
content: "",
user_id: "",
article_img: []
},
domain: "http://upload.qiniup.com",
qiniuaddr: "qiniuyun.xxxxx.cn", // 七牛云的图片外链地址
};
},
具体参数配置可参考:https://element.eleme.cn/#/zh-CN/component/upload
2、js部分
// 上传图片到七牛云
upqiniu (req) {
// 登录后上传
if(localStorage.getItem("USER_ID")){
const config = {
headers: {'Content-Type': 'multipart/form-data'}
}
let filetype = ''
if (req.file.type === 'image/png') {
filetype = 'png'
} else {
filetype = 'jpg'
}
// 重命名要上传的文件
const keyname = 'tour' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
// 从后端获取上传凭证token
this.axios.get('/token').then(res => {
const formdata = new FormData()
formdata.append('file', req.file)
formdata.append('token', res.data.data)
formdata.append('key', keyname)
// 获取到凭证之后再将文件上传到七牛云空间
this.axios.post(this.domain, formdata,config).then(res => {
this.blog.article_img.push('http://' + this.qiniuaddr + '/' + res.data.key);
// 'http://' + this.qiniuaddr + '/' + res.data.key 就是图片上传后的地址
}).catch(error=>{
console.log(error)
})
})
}
},
3、后台部分
use Qiniu\Storage\UploadManager;
use Qiniu\Auth;
//别忘了引入
// 图片上传token
public function gettoken(){
$accessKey = 'MTdzBcP66AhXwzryjufKzf2nDT2gOjrft0wYZc9FwXYW'; // 访问KEY
$secretKey = '_PZctlny0U_TfoAWsdfar-av-a8L3ma03W9gMZmgkxz'; // 密钥KEY
$domain = 'qiniuyun.xxxxx.cn'; // 访问域名
// 配置参数
$bucketName = 'tour-app'; // 创建的 bucket(新建的存储空间的名字)
$upManager = new UploadManager();
// 登录获取令牌
$auth = new Auth($accessKey, $secretKey);
$token = $auth->uploadToken($bucketName);
return success($token);
}
大致就这些,对于跨域以及七牛云的配置相信你们能够解决!!!