|
|
@@ -1,122 +1,148 @@
|
|
|
-<template>
|
|
|
+<template>
|
|
|
+
|
|
|
<div>
|
|
|
<el-upload
|
|
|
:action="ossUploadUrl"
|
|
|
- :data="useOss?dataObj:null"
|
|
|
+ :data="useOss ? dataObj : null"
|
|
|
list-type="picture"
|
|
|
- :multiple="false" :show-file-list="showFileList"
|
|
|
+ :multiple="false"
|
|
|
+ :show-file-list="showFileList"
|
|
|
:file-list="fileList"
|
|
|
:before-upload="beforeUpload"
|
|
|
:on-remove="handleRemove"
|
|
|
:on-success="handleUploadSuccess"
|
|
|
- :on-preview="handlePreview">
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ >
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 只能上传jpg/png文件，且不超过10MB
|
|
|
+ </div>
|
|
|
</el-upload>
|
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="fileList[0].url" alt="">
|
|
|
+ <img width="100%" :src="fileList[0].url" alt="" />
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {policy} from '@/api/oss'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'singleUpload',
|
|
|
- props: {
|
|
|
- value: String
|
|
|
+import { policy } from "@/api/oss";
|
|
|
+export default {
|
|
|
+ name: "singleUpload",
|
|
|
+ props: {
|
|
|
+ value: String,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ imageUrl() {
|
|
|
+ return this.value;
|
|
|
},
|
|
|
- computed: {
|
|
|
- imageUrl() {
|
|
|
- return this.value;
|
|
|
- },
|
|
|
- imageName() {
|
|
|
- if (this.value != null && this.value !== '') {
|
|
|
- return this.value.substr(this.value.lastIndexOf("/") + 1);
|
|
|
- } else {
|
|
|
- return null;
|
|
|
- }
|
|
|
- },
|
|
|
- fileList() {
|
|
|
- return [{
|
|
|
- name: this.imageName,
|
|
|
- url: this.imageUrl
|
|
|
- }]
|
|
|
- },
|
|
|
- showFileList: {
|
|
|
- get: function () {
|
|
|
- return this.value !== null && this.value !== ''&& this.value!==undefined;
|
|
|
- },
|
|
|
- set: function (newValue) {
|
|
|
- }
|
|
|
+ imageName() {
|
|
|
+ if (this.value != null && this.value !== "") {
|
|
|
+ return this.value.substr(this.value.lastIndexOf("/") + 1);
|
|
|
+ } else {
|
|
|
+ return null;
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dataObj: {
|
|
|
- policy: '',
|
|
|
- signature: '',
|
|
|
- key: '',
|
|
|
- ossaccessKeyId: '',
|
|
|
- dir: '',
|
|
|
- host: '',
|
|
|
- // callback:'',
|
|
|
+ fileList() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: this.imageName,
|
|
|
+ url: this.imageUrl,
|
|
|
},
|
|
|
- dialogVisible: false,
|
|
|
- useOss:true, //使用oss->true;使用MinIO->false
|
|
|
- ossUploadUrl:'http://daya-online.oss-cn-beijing.aliyuncs.com',
|
|
|
- minioUploadUrl:'http://localhost:8080/minio/upload',
|
|
|
- };
|
|
|
+ ];
|
|
|
},
|
|
|
- methods: {
|
|
|
- emitInput(val) {
|
|
|
- this.$emit('input', val)
|
|
|
+ showFileList: {
|
|
|
+ get: function () {
|
|
|
+ return (
|
|
|
+ this.value !== null && this.value !== "" && this.value !== undefined
|
|
|
+ );
|
|
|
},
|
|
|
- handleRemove(file, fileList) {
|
|
|
- this.emitInput('');
|
|
|
- },
|
|
|
- handlePreview(file) {
|
|
|
- this.dialogVisible = true;
|
|
|
+ set: function (newValue) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataObj: {
|
|
|
+ policy: "",
|
|
|
+ signature: "",
|
|
|
+ key: "",
|
|
|
+ ossaccessKeyId: "",
|
|
|
+ dir: "",
|
|
|
+ host: "",
|
|
|
+ // callback:'',
|
|
|
},
|
|
|
- beforeUpload(file) {
|
|
|
- let _self = this;
|
|
|
- if(!this.useOss){
|
|
|
- //不使用oss不需要获取策略
|
|
|
- return true;
|
|
|
- }
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- policy().then(response => {
|
|
|
+ dialogVisible: false,
|
|
|
+ useOss: true, //使用oss->true;使用MinIO->false
|
|
|
+ ossUploadUrl: "http://daya.ks3-cn-beijing.ksyuncs.com",
|
|
|
+ minioUploadUrl: "http://localhost:8080/minio/upload",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ emitInput(val) {
|
|
|
+ this.$emit("input", val);
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ this.emitInput("");
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ let _self = this;
|
|
|
+ if (!this.useOss) {
|
|
|
+ //不使用oss不需要获取策略
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ console.log(file);
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let key = new Date().getTime()+file.name
|
|
|
+ policy({fileName:file.name,postData:{ "acl":"public-read","key":key,unknowValueField:[]}})
|
|
|
+ .then((response) => {
|
|
|
_self.dataObj.policy = response.data.policy;
|
|
|
_self.dataObj.signature = response.data.signature;
|
|
|
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
|
|
|
- _self.dataObj.key = response.data.dir + '/${filename}';
|
|
|
+ _self.dataObj.key = response.data.dir + "/${filename}";
|
|
|
_self.dataObj.dir = response.data.dir;
|
|
|
_self.dataObj.host = response.data.host;
|
|
|
// _self.dataObj.callback = response.data.callback;
|
|
|
- resolve(true)
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- reject(false)
|
|
|
+ var ks3Options = {
|
|
|
+ KSSAccessKeyId: response.data.kssAccessKeyId,
|
|
|
+ policy: response.data.policy,
|
|
|
+ signature: response.data.signature,
|
|
|
+ bucket_name: "daya",
|
|
|
+ key: key,
|
|
|
+ acl: "public-read", //此处需要与policy中的acl值保持一致，默认值：private。
|
|
|
+ uploadDomain: "http://daya.ks3-cn-beijing.ksyuncs.com", //北京region
|
|
|
+ autoStart: false,
|
|
|
+ };
|
|
|
+ var pluploadOptions = {
|
|
|
+ drop_element: document.body,
|
|
|
+ };
|
|
|
+ var tempUpload = new ks3FileUploader(ks3Options, pluploadOptions);
|
|
|
+ tempUpload.uploader.start()
|
|
|
+ resolve(true);
|
|
|
})
|
|
|
- })
|
|
|
- },
|
|
|
- handleUploadSuccess(res, file) {
|
|
|
- console.log(res,file)
|
|
|
- this.showFileList = true;
|
|
|
- this.fileList.pop();
|
|
|
- let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
|
|
|
- if(!this.useOss){
|
|
|
- //不使用oss直接获取图片路径
|
|
|
- url = res.data.url;
|
|
|
- }
|
|
|
- this.fileList.push({name: file.name, url: url});
|
|
|
- this.emitInput(this.fileList[0].url);
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ reject(false);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleUploadSuccess(res, file) {
|
|
|
+ console.log(res, file);
|
|
|
+ this.showFileList = true;
|
|
|
+ this.fileList.pop();
|
|
|
+ let url = this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name;
|
|
|
+ if (!this.useOss) {
|
|
|
+ //不使用oss直接获取图片路径
|
|
|
+ url = res.data.url;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ this.fileList.push({ name: file.name, url: url });
|
|
|
+ this.emitInput(this.fileList[0].url);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style>
|
|
|
-
|
|
|
</style>
|
|
|
|
|
|
|
mo