一. 圖片上傳
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: '請(qǐng)輸入名稱', trigger: 'blur'},
{min: 1, max: 10, message: '長(zhǎng)度在 1 到 10個(gè)字符', trigger: 'blur'}
],
image: [
{required: true, message: '請(qǐng)上傳圖片'}
],
url: [
{required: true, message: '請(qǐng)輸入地址'}
],
sort: [
{required: true, message: '請(qǐng)輸入排序'}
],
desc: [
{required: true, message: '請(qǐng)輸入描述'}
],
},
}
},
created() {
this.init();
},
methods: {
init() {
axios.get(`/admin/sitenode`).then(res => {
this.options = res.data.sitenodes
})
},
//上傳之前,先驗(yàn)證,再拼接圖片地址
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('上傳頭像圖片大小不能超過(guò) 2MB!');
}
//如果驗(yàn)證失敗,返回假
if (isJPG && isLt2M == false) return false;
//如果驗(yàn)證成功,獲取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="",這里要填寫我七牛云的存儲(chǔ)區(qū)域.我是華東地區(qū),選擇客戶端上傳:
http(s)://upload.qiniup.com -
:data="qiniuForm"對(duì)應(yīng)下面的
qiniuForm: {
key: '',//文件名稱
token: '',
},
token由后端傳過(guò)來(lái),key由前端拼接
token后端:
a. 路由//單獨(dú)路由,上傳圖片使用 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"
//上傳之前,先驗(yàn)證,再拼接圖片地址
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('上傳頭像圖片大小不能超過(guò) 2MB!');
}
//如果驗(yàn)證失敗,返回假
if (isJPG && isLt2M == false) return false;
//如果驗(yàn)證成功,獲取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的時(shí)候 用到了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
},
