123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <template>
- <view class="file-upload">
- <view class="preview" v-for="(item, index) in fileList" :key="index">
- <image
- class="preview-image"
- mode="aspectFill"
- :src="
- item.fileType === 'image' ? item.tempFilePath : item.thumbTempFilePath
- "
- @tap="previewFile(index, item)"
- >
- </image>
- <image
- class="delete-icon"
- src="@/static/images/upload/delete.png"
- @tap="deleteFile(index)"
- />
- </view>
- <view class="upload-btn" v-if="!disabled" @click="chooseFile">
- <image
- class="upload-icon"
- src="@/static/images/upload/camera.png"
- alt=""
- />
- <view class="text">添加图片</view>
- </view>
- <view class="video" v-if="isPreviewVideo">
- <video
- id="myVideo"
- :src="videoUrl"
- autoplay
- controls
- @error="videoErrorCallback"
- ></video>
- <image src="@/static/images/upload/delete.png" @tap="closeVideo" />
- </view>
- </view>
- </template>
- <script>
- import { uploadFile } from "@/api/system";
- import CanvasCompress from "canvas-compress";
- import { fileToBase64 } from "@/utils";
- export default {
- name: "uploadFile",
- props: {
- maxCount: {
- type: Number,
- default: 5,
- },
- catalog: {
- type: String,
- default: "house",
- },
- },
- data() {
- return {
- fileList: [],
- disabled: false,
- isPreviewVideo: false,
- videoUrl: "",
- };
- },
- created() {
- this.compressor = new CanvasCompress({
- type: CanvasCompress.MIME.JPEG,
- width: 600,
- height: 600,
- quality: 0.8,
- });
- },
- methods: {
- async compress(file) {
- const res = await this.compressor.process(file);
- return res.result;
- },
- chooseFile() {
- var that = this;
-
- uni.chooseMedia({
- count: this.maxCount,
- mediaType: ["image"],
- sourceType: ["album", "camera"],
- maxDuration: 60,
- camera: "back",
- success(res) {
- const fileInfo = res.tempFiles;
- const fileType = res.type;
- fileInfo.forEach((item) => {
- console.log(item);
- item.fileType = fileType;
- if (fileType === "image" && item.size > 500 * 1024) {
- console.log("压缩再上传");
- uni.compressImage({
- src: item.tempFilePath,
- quality: 80,
- success: (res) => {
- item.tempFilePath = res.tempFilePath;
- that.upload(item);
- },
- fail: (err) => console.log(err),
- });
- } else {
- that.upload(item);
- }
- });
- },
- fail(err) {
- console.log(err);
- },
- });
-
-
- uni.chooseImage({
- count: this.maxCount,
- success(res) {
- console.log(res);
-
-
- res.tempFiles.forEach(async (file, index) => {
- const compressedFile = await that.compress(file);
- const fileBase64 = await fileToBase64(compressedFile.blob);
- const fileInfo = await uploadFile({
- fileBase64Vos: [
- { fileName: file.name, contentBase64: fileBase64 },
- ],
- catalog: that.catalog,
- });
- console.log("本地路径地址", res.tempFilePaths[index]);
- that.fileList.push({
- tempFilePath: res.tempFilePaths[index],
- fileType: "image",
- fileId: fileInfo.data,
- });
- });
- if (that.fileList.length >= that.maxCount) {
- that.disabled = true;
- }
- },
- fail(err) {
- console.log(err);
- },
- });
-
- },
- upload(res) {
- let item = { ...res };
- uploadFile(res.tempFilePath).then((res) => {
- item.fileId = res.data;
- this.fileList.push(item);
- if (this.fileList.length >= this.maxCount) {
- this.disabled = true;
- }
- });
- },
-
- deleteFile(val) {
- this.fileList.splice(val, 1);
- },
-
- previewFile(index, val) {
- if (val.fileType === "image") {
- const imageUrls = [];
- this.fileList.forEach((item) => {
- if (item.fileType === "image") {
- imageUrls.push(item.tempFilePath);
- } else if (item.fileType === "video") {
- imageUrls.push(item.thumbTempFilePath);
- }
- });
- uni.previewImage({
- current: index,
- urls: imageUrls,
- });
- } else if (val.fileType === "video") {
- this.videoUrl = val.tempFilePath;
- this.isPreviewVideo = true;
- } else if (val.fileType === "audio") {
- const innerAudioContext = uni.createInnerAudioContext();
- innerAudioContext.autoplay = true;
- innerAudioContext.src = val.tempFilePath;
- innerAudioContext.play();
- }
- },
-
- closeVideo() {
- this.isPreviewVideo = false;
- },
-
- videoErrorCallback(e) {
- uni.showModal({
- content: e.target.errMsg,
- showCancel: false,
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .file-upload {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- .preview {
- display: flex;
- flex-wrap: wrap;
- position: relative;
- margin: 5px;
- border-radius: 5px;
- border: 1px solid #e5e2e2;
- .preview-image {
- width: 70px;
- height: 70px;
- border-radius: 5px;
- }
- .delete-icon {
- width: 22px;
- height: 22px;
- position: absolute;
- top: 0;
- right: 0;
- }
- }
- .upload-btn {
- width: 80px;
- height: 80px;
- margin: 5px;
- border: 0.5px solid #ebe6e6;
- border-radius: 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .upload-icon {
- width: 35px;
- height: 35px;
- }
- .text {
- font-size: 10px;
- font-weight: 200;
- color: #999999;
- margin-top: 2px;
- }
- }
- .video {
- position: absolute;
- z-index: 999;
- image {
- width: 25px;
- height: 25px;
- position: absolute;
- right: 8px;
- }
- }
- }
- </style>
|