准备工作:
- 编写
/qiniu/getToken
接口,用于获取七牛token - index.html新增七牛地址配置
window._CONFIG['qn_base'] = "http://xxx"
直接贴JUploader组件的代码,调用方式和原版的JUploader组件差不多,并且兼容原版功能。
调用示例:
<j-upload v-decorator="['file']" :uploadTarget="'qiniu'" :maxFile="1" :trigger-change="true"></j-upload>
JUploader组件代码:
<template>
<a-upload
name="file"
:multiple="multiple"
:action="getUploadAction()"
:headers="headers"
:data="getUploadData()"
:fileList="fileList"
:beforeUpload="beforeUpload"
@change="handleChange">
<a-button>
<a-icon type="upload" />{{ text }}
</a-button>
</a-upload>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import {getAction} from "@/api/manage"
const FILE_TYPE_ALL = "all"
const FILE_TYPE_IMG = "image"
const FILE_TYPE_TXT = "file"
const UPLOAD_TARGET_LOCAL = "local"
const UPLOAD_TARGET_QINIU = "qiniu"
const UPLOAD_TARGET_OSS = "oss"
const UPLOAD_TARGET_COS = "cos"
const uidGenerator=()=>{
return '-'+parseInt(Math.random()*10000+1,10);
}
const uuidGenerator=()=>{
var s = []
var hexDigits = '0123456789abcdef'
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = '-'
var uuid = s.join('')
return uuid
}
const getFileName=(path)=>{
if(path.lastIndexOf("\\")>=0){
let reg=new RegExp("\\\\","g");
path = path.replace(reg,"/");
}
return path.substring(path.lastIndexOf("/")+1);
}
export default {
name: 'JUpload',
data(){
return {
urlDownload: "",
downloadUrl:{
local: window._CONFIG['domianURL'] + "/sys/common/download/",
qiniu: window._CONFIG['qn_base']
},
uploadAction:{
local:window._CONFIG['domianURL']+"/sys/common/upload",
qiniu: "http://upload-z0.qiniu.com",
oss: "",
cos: ""
},
tokenAction: {
qiniu: "/qiniu/getToken"
},
headers:{},
fileList: [],
uploadToken: ''
}
},
props:{
text:{
type:String,
required:false,
default:"点击上传"
},
fileType:{
type:String,
required:false,
default:FILE_TYPE_ALL
},
//最大文件数量
maxFile:{
type: Number,
required: false,
default: 1
},
// 文件上传目标, 默认本地
uploadTarget:{
type: String,
required: false,
default:UPLOAD_TARGET_LOCAL
},
/*这个属性用于控制文件上传的业务路径*/
bizPath:{
type:String,
required:false,
default:"temp"
},
value:{
type:String,
required:false
},
//此属性被废弃了
triggerChange:{
type: Boolean,
required: false,
default: false
},
multiple:{
type: Boolean,
required: false,
default: false
}
},
watch:{
value(val){
this.initFileList(val)
}
},
created(){
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token":token}
switch(this.uploadTarget){
case UPLOAD_TARGET_QINIU:
this.getQiniuToken();
break;
case UPLOAD_TARGET_LOCAL:
break;
case UPLOAD_TARGET_OSS:
break;
case UPLOAD_TARGET_COS:
break;
default:
}
},
methods:{
getUploadAction(){
switch(this.uploadTarget){
case UPLOAD_TARGET_LOCAL:
return this.uploadAction.local;
case UPLOAD_TARGET_QINIU:
return this.uploadAction.qiniu;
case UPLOAD_TARGET_OSS:
return this.uploadAction.oss;
case UPLOAD_TARGET_COS:
return this.uploadAction.cos;
default:
return this.uploadAction.local
}
},
getDownloadUrl(key){
switch(this.uploadTarget){
case UPLOAD_TARGET_LOCAL:
return this.downloadUrl.local + key;
case UPLOAD_TARGET_QINIU:
return this.downloadUrl.qiniu + key;
case UPLOAD_TARGET_OSS:
return this.downloadUrl.oss + key;
case UPLOAD_TARGET_COS:
return this.downloadUrl.cos + key;
default:
return this.uploadAction.local + key;
}
},
getUploadData(){
switch(this.uploadTarget){
case UPLOAD_TARGET_LOCAL:
return {'isup':1,'bizPath':this.bizPath};
case UPLOAD_TARGET_QINIU:
return {'token': this.uploadToken, 'key': uuidGenerator()};
case UPLOAD_TARGET_OSS:
return {};
case UPLOAD_TARGET_COS:
return {};
default:
return {'isup':1,'bizPath':this.bizPath};
}
},
getQiniuToken(){
getAction(this.tokenAction.qiniu, {}).then(res => {
if(res.success){
this.uploadToken = res.result
}else{
this.$message.error(res.message)
}
})
},
initFileList(paths){
if(!paths || paths.length==0){
//return [];
// update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
this.fileList = [];
return;
// update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
}
let fileList = [];
let arr = paths.split(",")
for(var a=0;a<arr.length;a++){
fileList.push({
uid:uidGenerator(),
name:getFileName(arr[a]),
status: 'done',
url: this.getDownloadUrl(arr[a]),
response:{
status:"history",
message:arr[a]
}
})
}
console.log("initFileList")
console.log(fileList)
this.fileList = fileList
},
handlePathChange(){
let uploadFiles = this.fileList
let path = ''
if(!uploadFiles || uploadFiles.length==0){
path = ''
}
let arr = [];
for(var a=0;a<uploadFiles.length;a++){
arr.push(uploadFiles[a].response.message)
}
if(arr.length>0){
path = arr.join(",")
}
this.$emit('change', path);
},
beforeUpload(file){
var fileType = file.type;
if(fileType===FILE_TYPE_IMG){
if(fileType.indexOf('image')<0){
this.$message.warning('请上传图片');
return false;
}
}else if(fileType===FILE_TYPE_TXT){
if(fileType.indexOf('image')>=0){
this.$message.warning('请上传文件');
return false;
}
}
//TODO 扩展功能验证文件大小
return true
},
handleChange(info) {
console.log("--文件列表改变--")
console.log(info)
let fileList = info.fileList
fileList = fileList.slice(-this.maxFile);
if(info.file.status==='done'){
switch(this.uploadTarget){
case UPLOAD_TARGET_LOCAL:
if(info.file.response.success){
fileList = fileList.map((file) => {
if (file.response) {
file.url = this.getDownloadUrl(file.response.message)
}
return file;
});
}
case UPLOAD_TARGET_QINIU:
if(info.file.response.key){
fileList = fileList.map((file) => {
if (file.response) {
file.response.message = file.response.key
file.url = this.getDownloadUrl(file.response.key)
}
return file;
});
}
}
this.$message.success(`${info.file.name} 上传成功!`);
}else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败.`);
}else if(info.file.status === 'removed'){
this.handleDelete(info.file)
}
this.fileList = fileList
if(info.file.status==='done' || info.file.status === 'removed'){
this.handlePathChange()
}
},
handleDelete(file){
//如有需要新增 删除逻辑
console.log(file)
},
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style scoped>
</style>
参考 https://www.cnblogs.com/wx1993/p/10496937.html
我上传总是404是怎么回事?
要么没上传成功,要么地址不对