|
@@ -10,25 +10,38 @@
|
|
|
<template>
|
|
|
<div id="saga-upload">
|
|
|
<div id="uploadFile">
|
|
|
-
|
|
|
<el-upload
|
|
|
- v-if="filesArr.length < max"
|
|
|
- class="upload-file"
|
|
|
- action
|
|
|
- :http-request="uploadAndSubmit"
|
|
|
- :show-file-list="false"
|
|
|
- drag
|
|
|
+ class="upload-file"
|
|
|
+ action
|
|
|
+ :http-request="uploadAndSubmit"
|
|
|
+ :show-file-list="false"
|
|
|
+ drag
|
|
|
>
|
|
|
- <el-button size="small" type="primary" v-if="!readOnly">点击上传</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip" v-if="!readOnly">请上传文件</div>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ v-if="!readOnly"
|
|
|
+ >点击上传</el-button>
|
|
|
+ <div
|
|
|
+ slot="tip"
|
|
|
+ class="el-upload__tip"
|
|
|
+ v-if="!readOnly"
|
|
|
+ >请上传文件</div>
|
|
|
</el-upload>
|
|
|
- <div v-if="item && filesArr.length" v-for="(item,index) in filesArr">
|
|
|
- <el-button type="text" @click="download(item)">{{delFile(item)}}</el-button>
|
|
|
+ <div
|
|
|
+ v-if="item && filesArr.length"
|
|
|
+ v-for="(item,index) in filesArr"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click="download(item.Key)"
|
|
|
+ >
|
|
|
+ {{delFile(item.Name)}}</el-button>
|
|
|
<i
|
|
|
- v-if="!readOnly"
|
|
|
- class="el-icon-close delete-icon"
|
|
|
- style="margin-left:10px; cursor:pointer"
|
|
|
- @click="deleteFile(index,item)"
|
|
|
+ v-if="!readOnly"
|
|
|
+ class="el-icon-close delete-icon"
|
|
|
+ style="margin-left:10px; cursor:pointer"
|
|
|
+ @click="deleteFile(index,item)"
|
|
|
></i>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -36,173 +49,179 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import tools from "@/utils/scan/tools";
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- keysArr: {
|
|
|
- type: [Array, String],
|
|
|
- default: function () {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- readOnly: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- max: {
|
|
|
- type: [Number, String],
|
|
|
- default: 6
|
|
|
- },
|
|
|
- defined: null
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- filesArr: []
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- let type = typeof (this.keysArr)
|
|
|
- this.fileFalg()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //判断是否为空
|
|
|
- fileFalg() {
|
|
|
- let type = typeof (this.keysArr)
|
|
|
- console.log(this.keysArr, "keysAee")
|
|
|
- if (type == 'string') {
|
|
|
- this.filesArr = [this.keysArr]
|
|
|
- } else {
|
|
|
- this.filesArr = tools.deepCopy(this.keysArr)
|
|
|
- }
|
|
|
+ import tools from "@/utils/scan/tools";
|
|
|
|
|
|
- if (!this.keysArr) {
|
|
|
- this.filesArr = []
|
|
|
- }
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ keysArr: {
|
|
|
+ type: [Array, String],
|
|
|
+ default: function () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ readOnly: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ max: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 6
|
|
|
+ },
|
|
|
+ defined: null
|
|
|
},
|
|
|
- //处理地址
|
|
|
- delFile(name) {
|
|
|
- console.log(name, "name")
|
|
|
- return name.length > 20 ? name.substring(0, 20) + "..." : ""
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filesArr: []
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
- resetFile() {
|
|
|
- this.filesArr = []
|
|
|
+ created() {
|
|
|
+ this.fileFalg()
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ //判断是否为空
|
|
|
+ fileFalg() {
|
|
|
+ let type = typeof (this.keysArr)
|
|
|
+ if (type == 'string') {
|
|
|
+ this.filesArr = [this.keysArr]
|
|
|
+ } else {
|
|
|
+ this.filesArr = tools.deepCopy(this.keysArr)
|
|
|
+ }
|
|
|
|
|
|
+ if (!this.keysArr) {
|
|
|
+ this.filesArr = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //处理地址
|
|
|
+ delFile(name) {
|
|
|
+ return name.length > 20 ? name.substring(0, 20) + "..." : name
|
|
|
+ },
|
|
|
|
|
|
- //点击下载
|
|
|
- download(key) {
|
|
|
- console.log(key)
|
|
|
- window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
|
|
|
- },
|
|
|
+ resetFile() {
|
|
|
+ this.filesArr = []
|
|
|
+ },
|
|
|
|
|
|
- //删除图片
|
|
|
- deleteFile(i, key) {
|
|
|
- this.filesArr.splice(i, 1);
|
|
|
- this.$emit("change", this.filesArr, this.defined);
|
|
|
- },
|
|
|
|
|
|
- //上传
|
|
|
- uploadAndSubmit(item) {
|
|
|
- // var form = document.forms["demoForm"];
|
|
|
+ //点击下载
|
|
|
+ download(key) {
|
|
|
+ console.log(key)
|
|
|
+ window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
|
|
|
+ },
|
|
|
|
|
|
- // if (form["file"].files.length > 0) {
|
|
|
- // 寻找表单域中的 <input type="file" ... /> 标签
|
|
|
- // var file = form["file"].files[0];
|
|
|
+ //删除图片
|
|
|
+ deleteFile(i, key) {
|
|
|
+ this.filesArr.splice(i, 1);
|
|
|
+ this.$emit("change", this.filesArr, this.defined);
|
|
|
+ },
|
|
|
|
|
|
- let file = item.file;
|
|
|
- // try sending
|
|
|
- let reader = new FileReader();
|
|
|
+ //上传
|
|
|
+ uploadAndSubmit(item) {
|
|
|
+ // var form = document.forms["demoForm"];
|
|
|
|
|
|
- let vm = this;
|
|
|
+ // if (form["file"].files.length > 0) {
|
|
|
+ // 寻找表单域中的 <input type="file" ... /> 标签
|
|
|
+ // var file = form["file"].files[0];
|
|
|
|
|
|
- let fileType = file.name.split(".");
|
|
|
- let type = fileType[fileType.length - 1];
|
|
|
- let key = "&key=" + fileType[0] + file.uid + "." + type
|
|
|
+ let file = item.file;
|
|
|
+ // try sending
|
|
|
+ let reader = new FileReader();
|
|
|
|
|
|
- reader.onloadstart = function () {
|
|
|
- // 这个事件在读取开始时触发
|
|
|
- };
|
|
|
- reader.onprogress = function (p) {
|
|
|
- // 这个事件在读取进行中定时触发
|
|
|
- };
|
|
|
+ let vm = this;
|
|
|
|
|
|
- reader.onload = function () {
|
|
|
- // 这个事件在读取成功结束后触发
|
|
|
- };
|
|
|
- reader.onloadend = function () {
|
|
|
- // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
- if (reader.error) {
|
|
|
- } else {
|
|
|
- // document.getElementById("bytesRead").textContent = file.size;
|
|
|
- // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- xhr.open(
|
|
|
- /* method */
|
|
|
- "POST",
|
|
|
- /* target url */
|
|
|
- "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
|
|
|
- /*, async, default to true */
|
|
|
- );
|
|
|
- //xhr.overrideMimeType("application/octet-stream");
|
|
|
- xhr.send(reader.result);
|
|
|
- xhr.onreadystatechange = function () {
|
|
|
- if (xhr.readyState == 4) {
|
|
|
- console.log(xhr)
|
|
|
- if (xhr.status == 200) {
|
|
|
- vm.filesArr.push(
|
|
|
- key.split("=")[1]
|
|
|
- );
|
|
|
- console.log(vm.filesArr)
|
|
|
- vm.$emit("change", vm.filesArr, vm.defined);
|
|
|
- } else {
|
|
|
- this.$message.error(res.data.ResultMsg)
|
|
|
+ let fileType = file.name.split(".");
|
|
|
+ let type = fileType[fileType.length - 1];
|
|
|
+ let key = "&key=" + fileType[0] + file.uid + "." + type
|
|
|
+ let CreateTime = tools.formatDate(new Date(file.lastModified))
|
|
|
+ reader.onloadstart = function () {
|
|
|
+ // 这个事件在读取开始时触发
|
|
|
+ };
|
|
|
+ reader.onprogress = function (p) {
|
|
|
+ // 这个事件在读取进行中定时触发
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.onload = function () {
|
|
|
+ // 这个事件在读取成功结束后触发
|
|
|
+ };
|
|
|
+ reader.onloadend = function () {
|
|
|
+ // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
+ if (reader.error) {
|
|
|
+ } else {
|
|
|
+ // document.getElementById("bytesRead").textContent = file.size;
|
|
|
+ // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open(
|
|
|
+ /* method */
|
|
|
+ "POST",
|
|
|
+ /* target url */
|
|
|
+ "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
|
|
|
+ /*, async, default to true */
|
|
|
+ );
|
|
|
+ //xhr.overrideMimeType("application/octet-stream");
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ console.log(xhr)
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ let fileObject = {
|
|
|
+ Key: key.split("=")[1],
|
|
|
+ Type: type,
|
|
|
+ Name: file.name,
|
|
|
+ CreateTime,
|
|
|
+ SystemId: 'dataPlatform'
|
|
|
+ }
|
|
|
+ vm.filesArr.push(fileObject);
|
|
|
+ vm.$emit("change", vm.filesArr, vm.defined);
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.ResultMsg)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
- };
|
|
|
- reader.readAsArrayBuffer(file);
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- keysArr: function (val) {
|
|
|
- this.fileFalg()
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ keysArr: function (val) {
|
|
|
+ this.fileFalg()
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-#saga-upload {
|
|
|
- .dill-image {
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
- top: 0px;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .el-upload-dragger {
|
|
|
- width: 180px;
|
|
|
- height: 180px;
|
|
|
- }
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- #uploadFile {
|
|
|
- .upload-file {
|
|
|
- overflow: hidden;
|
|
|
- .el-upload-dragger {
|
|
|
- width: inherit;
|
|
|
- height: inherit;
|
|
|
- border: none;
|
|
|
+ #saga-upload {
|
|
|
+ .dill-image {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload-dragger {
|
|
|
+ width: 180px;
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #uploadFile {
|
|
|
+ .upload-file {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .el-upload-dragger {
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|