問題反饋,圖片上傳
阿新 • • 發佈:2022-04-14
<template> <el-dialog :visible.sync="dialogService" width="720px" class="dialog-customer-service"> <div class="txr-dialog"> <div class="txr-dialog-header"> <span class="txr-header-title">問題反饋</span> <button class="el-dialog__headerbtn" type="button" @click="closeServiceDialog"><i class="el-dialog__close el-icon el-icon-close"></i></button> </div> <div class="txr-dialog-content"> <div class="form-item"> <el-input class="item-textarea" type="textarea" v-model="formService.text" rows="5" placeholder="問題詳情描述" spellcheck="false"></el-input> </div> <el-upload class="form-upload" action="#" :limit="8" :on-exceed="handleExceed" ref="elUpload" list-type="picture-card" :on-change="beforeUpload" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <span class="el-upload-list__item-actions"> <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> --> <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> --> <span class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> <!-- <el-dialog :visible.sync="dialogVisible" width="70%" top="15vh" append-to-body> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> --> <div class="form-item"> <span class="item-title">聯絡方式</span> <el-input class="item-phone" v-model="formService.phone" placeholder="手機號碼"></el-input> </div> <div class="form-item" style="flex-direction: column;align-items: flex-start;"> <p class="item-title item-service">電話客服:{{formService.service_phone}}</p> <p class="item-title item-service">QQ客服:{{formService.service_qq}}</p> <p class="item-sub-title">(週一至週五,09:00-18:00)</p> </div> <div class="btns"> <button class="btn submit" @click="submitUpload">提交</button> <button class="btn cancel" @click="closeServiceDialog">取消</button> </div> </div> </div> </el-dialog> </template> <script> import { mapState } from "vuex"; import Axios from "axios"; export default { data() { return { formService: { text: "", phone: "", service_phone: "400-400-4000", service_qq: "88888888", }, fileData: null, dialogImageUrl: "", dialogVisible: false, }; }, computed: { ...mapState("Dialogs", ["dialogServiceVisible"]), dialogService: { get() { return this.dialogServiceVisible; }, set(val) { this.$store.commit("Dialogs/SET_SERVICE_DIALOG", val); }, }, }, methods: { closeServiceDialog() { this.$store.commit("Dialogs/SET_SERVICE_DIALOG", false); }, handleRemove(file) { let uploadFiles = this.$refs.elUpload.uploadFiles; uploadFiles.forEach((value, index) => { if (value.uid === file.uid) { uploadFiles.splice(index, 1); } }); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleExceed(files, fileList) { this.$message.warning(`當前限制選擇上傳8個圖片檔案`); }, submitUpload() { // this.fileData = new FormData(); // this.$refs.elUpload.submit(); debugger; let fileData = new FormData(); let fileList = this.$refs.elUpload.uploadFiles; fileList.map((item) => { fileData.append("file", item.raw); }); fileData.append("text", this.formService.text); fileData.append("phone", this.formService.phone); fileData.append("service_phone", this.formService.service_phone); fileData.append("service_qq", this.formService.service_qq); Axios.post("/api/game/list", fileData, { headers: { "Content-Type": "multipart/form-data", }, }) .then((res) => {}) .catch((err) => { this.$message.error("上傳失敗,網路請求錯誤"); this.loading.close(); this.upload = false; }); }, beforeUpload(params) { const file = params.raw, fileType = file.type, isImage = fileType.indexOf("image") !== -1, isLt2M = file.size / 1024 / 1024 < 1; let uploadFiles = this.$refs.elUpload.uploadFiles; let fileIndex = uploadFiles.findIndex((s) => s.uid === params.uid); if (!isImage) { this.$message.warning("只能上傳圖片格式png、jpg、gif!"); uploadFiles.splice(fileIndex, 1); return; } if (!isLt2M) { this.$message.warning("上傳圖片應小於2M"); uploadFiles.splice(fileIndex, 1); return; } return file; }, }, }; </script> <style lang="less" scoped> .txr-dialog-content { padding: 0 20px; position: relative; .form-item { margin-top: 18px; display: flex; align-items: center; .item-textarea { /deep/ textarea { font-family: "puhui"; background: #1f2225; border: unset; margin-top: 0px; margin-bottom: 0px; border-radius: 13px; padding: 15px 20px; color: #ffffffd6; font-size: 14px; max-height: 200px; } /deep/ ::-webkit-input-placeholder { // color: #1890ff; } } .item-title { min-width: 70px; color: white; } .item-service { margin-top: 7px; } .item-sub-title { margin-top: 5px; color: #ffffff66; } .item-phone { width: 180px; /deep/ input { background: #1f2225; border-color: #1f2225; } } } .form-upload { margin-top: 18px; /deep/ .el-upload--picture-card { width: 100px; height: 100px; line-height: 100px; } /deep/ .el-upload-list--picture-card .el-upload-list__item { width: 100px !important; height: 100px !important; line-height: 100px; transition: all 0.3s; } /deep/ .el-upload-list--picture-card .el-upload-list__item > div { height: 100%; } /deep/ .el-upload-list__item-thumbnail { object-fit: cover; } } .btns { // position: absolute; // bottom: 22px; // left: 50%; // transform: translate(-50%, 0); margin-top: 50px; margin-bottom: 22px; text-align: center; button { width: 80px; height: 30px; line-height: 30px; border-radius: 6px; } .submit { margin-right: 20px; } .cancel { background: #1f2225; color: white; } } } </style>