一. 图片上传
vue模版:
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="缩略图" :label-width="formLabelWidth" prop="image">
<el-upload
action="http://upload.qiniup.com"
:data="qiniuForm"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.image" :src="form.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<script>
const uuidv1 = require('uuid/v1');
export default {
data() {
return {
options: [],
value: '',
formLabelWidth: '120px',
qiniuForm: {
key: '',//文件名称
token: '',
},
form:
{
site_node_id: '',
name: '',
image: '',
is_show: '',
url: '',
sort: '',
desc: '',
},
rules: {
site_node_id: [
{required: true}
],
name: [
{required: true, message: '请输入名称', trigger: 'blur'},
{min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur'}
],
image: [
{required: true, message: '请上传图片'}
],
url: [
{required: true, message: '请输入地址'}
],
sort: [
{required: true, message: '请输入排序'}
],
desc: [
{required: true, message: '请输入描述'}
],
},
}
},
created() {
this.init();
},
methods: {
init() {
axios.get(`/admin/sitenode`).then(res => {
this.options = res.data.sitenodes
})
},
//上传之前,先验证,再拼接图片地址
async beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
//如果验证失败,返回假
if (isJPG && isLt2M == false) return false;
//如果验证成功,获取token
let fileType = file.type == 'image/jpeg' ? 'jpg' : 'png';//获取拓展名
let res = await axios.get(`/uploadToken`)
this.qiniuForm = {
ket: `${uuidv1()}.${fileType}`,//文件名
token: res.data.upToken
}
return true;
},
//上传之后
handleAvatarSuccess(res, file) {
this.form.image = 'http://luvxia.com/' + res.key
},
//提交新增
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post(`/admin/site`, this.form).then(res => {
this.init();
})
} else {
console.log('error submit!!');
return false;
}
});
},
},
}
</script>
备注:
- 由于我上传图片是使用七牛云.所以action="",这里要填写我七牛云的存储区域.我是华东地区,选择客户端上传:
http(s)://upload.qiniup.com -
:data="qiniuForm"对应下面的
qiniuForm: {
key: '',//文件名称
token: '',
},
token由后端传过来,key由前端拼接
token后端:
a. 路由//单独路由,上传图片使用 Route::get('/uploadToken', 'PhotoController@uploadToken');
b. 控制器
public function uploadToken()
{
$bucket = '七牛云空间名';
$accessKey = 'xxxxxx';
$secretKey = 'xxxxx';
$auth = new Auth($accessKey, $secretKey);
$upToken = $auth->uploadToken($bucket);
return response()->json(compact('upToken'));
}
- 图片上传之前
:before-upload="beforeAvatarUpload"
//上传之前,先验证,再拼接图片地址
async beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
//如果验证失败,返回假
if (isJPG && isLt2M == false) return false;
//如果验证成功,获取token
let fileType = file.type == 'image/jpeg' ? 'jpg' : 'png';//获取拓展名
let res = await axios.get(`/uploadToken`)
this.qiniuForm = {
ket: `${uuidv1()}.${fileType}`,//文件名
token: res.data.upToken
}
return true;
},
这里要注意在拼接key的时候 用到了uuid,百度:https://www.npmjs.com/package/uuid
步骤:
a. 终端跑命令:cnpm install uuid --S
b. 引用:const uuidv1 = require('uuid/v1');再拼接
4.上传图片之后::on-success="handleAvatarSuccess"
//上传之后
handleAvatarSuccess(res, file) {
this.form.image = 'http://luvxia.com/' + res.key
},
