vue 上傳圖片aliossupload 外掛使用
阿新 • • 發佈：2018-11-27
<el-row :gutter="20"> <el-col :span="2"> <div class="grid-content"><span class="text-justify goodsImg_title">商品圖片</span></div> </el-col> <div class="div-inline uploadImg_box"> <upload-img :isInvert="false" :maxLimit="5" fileName="goods" @uploadSuccess="uploadSuccess"></upload-img> </div> <span class="uploadImg_tip">請上傳圖片，最多上傳5張</span> </el-row>
<script>
import uploadImg from 'components/aliossupload'//上傳圖片元件
uploadSuccess($val) {
console.log($val.fileName);
this.ruleForm.goodsImgs = $val.fileName.join(",");
console.log(this.ruleForm.goodsImgs);
}
</script>
元件：
<!--
圖片上傳
使用：<upload-img :imgMenu="depositImgSelf" :isInvert="true" :maxLimit="3" fileName="combo" @uploadSuccess="uploadDepositImgSuccess"></upload-img>
注意：（1）:imgMenu="depositImgSelf"中的depositImgSelf需要是父元件中自定義的變數，用來接後臺返回的圖片陣列【不能直接將後臺返回的陣列圖片放上去】
（2）:isInvert="true",表示是否返現後臺傳過來的圖片，一般用於編輯頁面需要資料回顯時
呼叫介面成功以後回顯時的資料處理：
//保證金匯款證明掃描件回顯
let depositImgMenu = [];
this.depositImgSelf.forEach((item, index, arr) => {
let imgd = item.split("/");
depositImgMenu.push(imgd[imgd.length - 1])
})
//this.goodsDetai.depositImgList中的depositImgList為後臺返回的欄位名
this.goodsDetai.depositImgList = depositImgMenu;
console.log("depositImgMenu:",depositImgMenu)
（3）:maxLimit="3"限制上傳多少張圖片
（4）fileName="combo"中的combo是根據後臺返回的圖片路徑中的為準，例如http://img.yunzhenshi.com/lzxk/develop/combo/1541742647007.jpg中fileName為combo，而http://img.yunzhenshi.com/lzxk/develop/goods/1541402021731.jpg中的fileName為goods
（5）@uploadSuccess中方法：
uploadDepositImgSuccess($val) {
console.log("保證金匯款證明掃描件$val:",$val)
//this.goodsDetai.depositImgList中的depositImgList為後臺返回的欄位名
this.goodsDetai.depositImgList = $val.fileName;
}
-->
<template>
<div>
<el-upload
ref="uploadImg"
:action="actionUrl"
list-type="picture-card"
multiple
:limit="limit"
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
:http-request="upqiniu"
:file-list="imglist"
:on-change="uploadImgChange"
:on-remove="handleRemove"
:on-exceed="handleExceed">
<!--<el-button slot="trigger" size="small" type="primary"><i class="el-icon-plus"></i></el-button>-->
<div class="uploadBtn" v-show="uploadDisabled"><i class="el-icon-plus"></i></div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body='true'>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import {getStore, getAliOssUrl} from 'src/config/cache'
export default {
props: {
imgMenu: {//反顯圖片集合
type: Array
},
maxLimit: {//圖片上傳上限
type: Number,
default: 5
},
isInvert: {//是否反顯
type: Boolean
},
fileName: {//上傳檔名----拼到上傳路徑
type: String
},
uploadImg_A: {//上傳檔名----拼到上傳路徑
type: Number
}
},
data() {
return {
limit: this.$props.maxLimit,//圖片上傳上限
AliOssUrlist: [], //簽名等上傳憑證
actionUrl: '', //上傳路徑
fileUrl: '',//
dialogImageUrl: '', //圖片放大路徑
dialogVisible: false,//圖片放大 彈窗隱藏
uploadDisabled: true,//上傳按鈕是否顯示，是否達到上傳上限
imglist: [],//展示圖片集合
imglistName: [],//需要傳到後臺圖片名字集合
};
},
created() {
this.init()
},
computed: {},
watch: {
imgMenu(val) {
if (this.$props.isInvert == true) {//是否需要反顯，需要反顯展示相關圖片
val.forEach((item, index, arr) => {
// console.log("是否需要反顯，需要反顯展示相關圖片:",item);
this.imglist.push({url: item});
});
}
if(val.length>=this.limit){
this.uploadDisabled=false;
}
},
uploadImg_A(){
this.$refs.uploadImg.clearFiles();
}
},
methods: {
init() {
console.log('上傳憑證：',this.$props, getStore('AliOssUrlist'));
if (getStore('AliOssUrlist')) {//獲取快取中的阿里上傳憑證---獲取不到重新向後臺傳送請求
this.AliOssUrlist = JSON.parse(getStore('AliOssUrlist'));
this.fileUrl = this.AliOssUrlist.aliOssDir + this.$props.fileName + '/';
} else {
this.AliOssUrlist = getAliOssUrl();
}
},
funcUrlDel(url,paramKey){//刪除上傳圖片成功以後圖片url引數並返回不帶引數的url
if(url.indexOf("?")!="-1"){
var urlParam = url.substr(url.indexOf("?")+1);
var beforeUrl = url.substr(0,url.indexOf("?"));
var nextUrl = "";
var arr = new Array();
if(urlParam!=""){
var urlParamArr = urlParam.split("&");
for(var i=0;i<urlParamArr.length;i++){
var paramArr = urlParamArr[i].split("=");
if(paramArr[0]!=paramKey){
arr.push(urlParamArr[i]);
}
}
}
if(arr.length>0){
nextUrl = "?"+arr.join("&");
}
url = beforeUrl+nextUrl;
return url;
}else{
return url;
}
},
upqiniu(req) {//上傳到阿里----達到上限時隱藏上傳彈窗；
let OSS = require('ali-oss').Wrapper;
let client = new OSS({
region: this.AliOssUrlist.ossRegion,
accessKeyId: this.AliOssUrlist.ossKey,
accessKeySecret: this.AliOssUrlist.ossSecret,
bucket: this.AliOssUrlist.ossBucket
});
client.multipartUpload(this.actionUrl, req.file).then(res => {});
},
uploadImgChange(file, fileList){//檔案上傳
console.log('檔案上傳file',file);
console.log('檔案上傳fileList',fileList);
var imgtype = file.name.toLowerCase().split('.');
let arr1=[];
fileList.forEach(function(item){
if(item.status=='success'){
let path=item.url;
let filename='';//從路徑中擷取圖片名[包括字尾名]
if(path.indexOf("/")>0){//如果包含有"/"號 從最後一個"/"號+1的位置開始擷取字串
filename=path.substring(path.lastIndexOf("/")+1,path.length);
}else{
filename=path;
}
arr1.push(filename);
}else{
arr1.push(item.uid+'.'+imgtype[1]);
}
});
if(fileList.length>=0){
this.uploadDisabled=true;
}
if(fileList.length>=this.limit){
this.uploadDisabled=false;
}
this.$emit('uploadSuccess', {fileName: arr1});
},
removeByValue(arr, val) {//刪除陣列中指定元素
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
return arr;
},
handleRemove(file, fileList) {//刪除圖片
console.log('刪除圖片file',file);
console.log('刪除圖片fileList',fileList);
let arr1=[];
fileList.forEach(function(item,index){
console.log("item.url:"+index+":",item.url)
let path=item.url;
let filename='';//從路徑中擷取圖片名[包括字尾名]
if(path.indexOf("/")>0){//如果包含有"/"號 從最後一個"/"號+1的位置開始擷取字串
filename=path.substring(path.lastIndexOf("/")+1,path.length);
}else{
filename=path;
}
arr1.push(filename);
});
if(fileList.length>=0){
this.uploadDisabled=true;
}
if(fileList.length>=this.limit){
this.uploadDisabled=false;
}
this.$emit('uploadSuccess', {fileName: arr1});
},
handleExceed(files, fileList) {
this.$message.warning(`當前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
},
handlePictureCardPreview(file) {//放大圖片
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl)
this.dialogVisible = true;
},
beforeAvatarUpload(file) {// 圖片長傳-之前校驗
console.log("file:",file)
this.showNoticeUploading = true
let type = file.name.split('.')[1];
this.actionUrl = this.fileUrl + file.uid + '.' + type;
console.log(this.actionUrl);
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 10;
// if (!isJPG) {
// this.$message.error('上傳頭像圖片只能是 JPG 格式!')
// return
// }
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過 10MB!')
return
}
}
}
};
</script>
<style type="text/css">
.oss_file {
height: 100px;
width: 100%;
}
.oss_file input {
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 100%;
height: 100%;
}
.el-upload--picture-card {
width: auto;
height: auto;
border: none;
}
.el-upload {
/*display:none!important;*/
}
.uploadBtn{
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
line-height: 146px;
vertical-align: top;
text-align: center;
cursor: pointer;
outline: 0;
}
</style>