123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <!--
- 上传组件
- type: 类型,默认image
- identify: key值,通过val获取
- disabled: 是否可用
- index: 父组件的下标
- imageIndex: 图片下标
- isShow: 图片的显示
- -->
- <template>
- <div id="saga-upload">
- <div id="uploadFile">
- <el-upload
- class="upload-file"
- action
- :http-request="uploadAndSubmit"
- :show-file-list="false"
- drag
- >
- <el-button
- size="small"
- :type="isShow ===1 ? 'text':'primary'"
- v-if="!readOnly"
- >点击上传</el-button>
- <span v-if="isShow !== 1 || isShow == undefined">
- <div
- slot="tip"
- class="el-upload__tip"
- v-if="!readOnly"
- >请上传文件</div>
- </span>
- </el-upload>
- <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)"
- ></i>
- </div>
- </div>
- </div>
- </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
- },
- isShow: {
- type: Number
- },
- contextKey: {
- type: [String, Object]
- },
- defined: null
- },
- data() {
- return {
- filesArr: []
- };
- },
- created() {
- this.fileFalg()
- },
- methods: {
- //判断是否为空
- fileFalg() {
- let type = typeof (this.keysArr)
- if (type == 'string') {
- this.filesArr = [this.keysArr]
- // this.filesArr = JSON.parse(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
- },
- resetFile() {
- this.filesArr = []
- },
- //点击下载
- download(key) {
- console.log(key)
- window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
- },
- //删除图片
- deleteFile(i, key) {
- this.filesArr.splice(i, 1);
- this.$emit("change", this.filesArr, this.defined);
- },
- //上传
- uploadAndSubmit(item) {
- // var form = document.forms["demoForm"];
- // if (form["file"].files.length > 0) {
- // 寻找表单域中的 <input type="file" ... /> 标签
- // var file = form["file"].files[0];
- let file = item.file;
- // try sending
- let reader = new FileReader();
- let vm = this;
- 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.onUploadProgress = function (progressEvent) {
- let percent = (progressEvent.loaded / progressEvent.total * 100) | 0
- //调用onProgress方法来显示进度条,需要传递个对象 percent为进度值
- uploader.onProgress({percent: percent})
- }
- 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);
- if(vm.isShow === 1) {
- let oFile = {}
- oFile[vm.contextKey] = vm.filesArr
- vm.$emit("change", oFile, vm.defined);
- } else {
- vm.$emit("change", vm.filesArr, vm.defined);
- }
- } else {
- this.$message.error(res.data.ResultMsg)
- }
- }
- };
- }
- };
- reader.readAsArrayBuffer(file);
- }
- },
- watch: {
- keysArr: function (val) {
- this.fileFalg()
- }
- }
- };
- </script>
- <style lang="less">
- #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>
|