|
|
@@ -0,0 +1,212 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
|
|
|
+ <template v-if="item.status === 'finished'">
|
|
|
+ <img :src="item.url + '!/both/100x100'" />
|
|
|
+ <div class="demo-upload-list-cover">
|
|
|
+ <Icon
|
|
|
+ type="ios-eye-outline"
|
|
|
+ size="30"
|
|
|
+ @click.native="handleView(item.url)"
|
|
|
+ ></Icon>
|
|
|
+ <Icon
|
|
|
+ type="ios-trash-outline"
|
|
|
+ size="30"
|
|
|
+ @click.native="handleRemove(item)"
|
|
|
+ ></Icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Progress
|
|
|
+ v-if="item.showProgress"
|
|
|
+ :percent="item.percentage"
|
|
|
+ hide-info
|
|
|
+ ></Progress>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <Upload
|
|
|
+ ref="upload"
|
|
|
+ v-show="this.uploadList.length < 6"
|
|
|
+ :data="headers"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :default-file-list="defaultList2"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :format="['jpg', 'jpeg', 'png']"
|
|
|
+ :max-size="5 * 1024"
|
|
|
+ :on-format-error="handleFormatError"
|
|
|
+ :on-exceeded-size="handleMaxSize"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ multiple
|
|
|
+ type="drag"
|
|
|
+ :action="this.uploadUrl"
|
|
|
+ style="display: inline-block;width:100px;"
|
|
|
+ >
|
|
|
+ <div style="width: 100px;height:100px;line-height: 100px;">
|
|
|
+ <Icon type="ios-camera" size="40"></Icon>
|
|
|
+ </div>
|
|
|
+ </Upload>
|
|
|
+ <Modal title="View Image" v-model="visible">
|
|
|
+ <img :src="imgUrl" v-if="visible" style="width: 100%" />
|
|
|
+ </Modal>
|
|
|
+ <div>最多上传6张图片</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import MD5 from "js-md5";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "UploadPhotos",
|
|
|
+ props: ["defaultList"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // defaultList: [
|
|
|
+ // {
|
|
|
+ // name: "a42bdcc1178e62b4694c830f028db5c0",
|
|
|
+ // url:
|
|
|
+ // "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "bc7521e033abdd1e92222d733590f104",
|
|
|
+ // url:
|
|
|
+ // "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ imgUrl: "",
|
|
|
+ visible: false,
|
|
|
+ defaultList2: [...this.defaultList],
|
|
|
+ uploadList: [],
|
|
|
+ uploadUrl: "",
|
|
|
+ headers: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleView(name) {
|
|
|
+ this.imgUrl = name;
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ const fileList = this.$refs.upload.fileList;
|
|
|
+ this.$emit("on-photo-removed", file.url);
|
|
|
+ this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
|
|
|
+ },
|
|
|
+ handleSuccess(res, file) {
|
|
|
+ file.url = this.resultUrl;
|
|
|
+ // file.name = "7eb99afb9d5f317c912f08b5212fd69a";
|
|
|
+ this.$emit("on-photo-added", this.resultUrl);
|
|
|
+ },
|
|
|
+ handleFormatError(file) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: "只接受jpg/jpeg/png图片文件",
|
|
|
+ desc: file.name
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleMaxSize(file) {
|
|
|
+ const MAX_UPLOAD_SIZE = 5;
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: "文件过大",
|
|
|
+ desc: file.name + `超过${MAX_UPLOAD_SIZE}M.`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async handleBeforeUpload(file) {
|
|
|
+ const MAX_UPLOADS_NUM = 6;
|
|
|
+ const check = this.uploadList.length < MAX_UPLOADS_NUM;
|
|
|
+ if (!check) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: `最多上传${MAX_UPLOADS_NUM}张照片。`
|
|
|
+ });
|
|
|
+ // return false;
|
|
|
+ return Promise.resolve(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ function readAsArrayBuffer(file) {
|
|
|
+ return new Promise(function(resolve) {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ reader.onload = function(e) {
|
|
|
+ resolve(e.target.result);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const buffer = await readAsArrayBuffer(file);
|
|
|
+
|
|
|
+ // console.log(buffer);
|
|
|
+ // var view1 = new Uint8Array(buffer);
|
|
|
+ // console.log(buffer[0], buffer[1], buffer[429721]);
|
|
|
+ const fileMd5 = MD5(buffer);
|
|
|
+ // console.log(fileMd5);
|
|
|
+
|
|
|
+ const examRecordDataId = this.$route.params.examRecordDataId - 0;
|
|
|
+ const order = this.$route.params.order - 0;
|
|
|
+ const fileSuffix = file.name.split(".").pop();
|
|
|
+ const params = new URLSearchParams();
|
|
|
+ params.append("examRecordDataId", examRecordDataId);
|
|
|
+ params.append("order", order);
|
|
|
+ params.append("fileSuffix", fileSuffix);
|
|
|
+ params.append("fileMd5", fileMd5);
|
|
|
+ const res = await this.$http.post(
|
|
|
+ "/api/ecs_oe_student/examControl/upyunSignature",
|
|
|
+ params,
|
|
|
+ {
|
|
|
+ examRecordDataId,
|
|
|
+ order,
|
|
|
+ fileSuffix,
|
|
|
+ fileMd5
|
|
|
+ },
|
|
|
+ { headers: { "content-type": "application/x-www-form-urlencoded" } }
|
|
|
+ );
|
|
|
+
|
|
|
+ // console.log(res);
|
|
|
+ this.headers = {
|
|
|
+ policy: res.data.policy,
|
|
|
+ authorization: res.data.signature
|
|
|
+ };
|
|
|
+ this.uploadUrl = res.data.uploadUrl;
|
|
|
+ this.resultUrl = res.data.upyunFileDomain + res.data.filePath;
|
|
|
+ return check;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.uploadList = this.$refs.upload.fileList;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.demo-upload-list {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+.demo-upload-list img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.demo-upload-list-cover {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+}
|
|
|
+.demo-upload-list:hover .demo-upload-list-cover {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.demo-upload-list-cover i {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 2px;
|
|
|
+}
|
|
|
+</style>
|
Michael Wang