123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413 |
- <template>
- <view class=" imgupload">
- <view class=" flex_wrap">
- <view class="imgs-view" v-if="videoUrl">
- <!-- <video :src="videoUrl" style="height: 500rpx;
- width: 600rpx;" :poster="videoUrl+ '?x-oss-process=video/snapshot,t_0,f_jpg'" controls :show-center-play-btn="false" auto-pause-if-navigate></video> -->
- <j-video class="jvideo" :url="videoUrl" width="500rpx" height="600rpx"></j-video>
-
- <view class="del-btn" @click="delVideo()">
- ×
- </view>
- </view>
- <view v-else class="upload-img-view flex_xy_center" @click="upPhoto">
- <image
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAArklEQVRIS2NkGCDAOED2Mgw9i9vb2xVAoVVZWfmAnFAj28ddXV33QRaWlZUp0tvi/1CLyXI8WZpAFnZ1dY1aTFJUjwY10cE1mriIDiqoQpTEBSoGmZmZ9zMwMICLQyqC08zMzDHFxcW3YGYODotJ8eFo4iIltEBqR0suokNsNHERHVTYSi5SNA9kUJ+CtrnMSHEw1iKTFAN6e3vVQOqRy19S9JOdj0mxBJvakWcxAFpiZB+QSLWnAAAAAElFTkSuQmCC"
- ></image>
- </view>
- </view>
- </view>
- </template>
- <script>
- import jVideo from "@/components/j-video/j-video.vue"
- // import jVideo from "../../../components/j-video/j-video.vue"
- export default {
- name: "VideoUpload",
- props: {
- videoSrc: {
- //视频文件
- type: String,
- default: null,
- },
- videoSize: {
- //图片大小 单位M
- type: Number,
- default: 10,
- },
- formData: {
- type: Object,
- default: function () {
- return {};
- },
- },
- imgType: {
- //如果是小程序,这个值则没用作用
- type: [Array],
- default: function () {
- return ["MP4", "mp4"];
- },
- },
- loading: {
- type: Boolean,
- default: true,
- },
- url: {
- //上传图片Url
- type: String,
- },
- async: {
- type: Boolean,
- default: false,
- },
- header: {
- type: Array,
- default: function () {
- return [];
- },
- },
- previewMany: {
- type: Boolean,
- default: false,
- },
- config: {
- type: Object,
- default: function () {
- return {
- delIcon: "", //删除图片icon
- resultTip: true, //结果提示
- resultType: "1", //结果展示类型
- loadIcon: "", //加载时的图标
- loadText: "", //加载时的文字
- };
- },
- },
- },
- components:{
- jVideo
- },
- data() {
- return {
- videoUrl: null,
- startUpload: false,
- tipObj: {
- prompt: "",
- typeColor: "#009100",
- must: false, //必须要存在的时候
- success: "#009100", //成功-#009100; 可自定义修改
- warning: "#bb9300", // 警告 -#bb9300; 可自定义修改
- error: "#FF0000", // 失败--#FF0000; 可自定义修改
- },
- headers: {},
- curPlatform: "",
- currIndex: null,
- ossData: {}, //oss参数
- duration: null,
- size: null,
- VideoSize: 100,
- };
- },
- created() {
- // this.formDataGet();
- },
- watch: {
- videoSrc(n, o) {
- this.videoUrl = n;
- },
- },
- methods: {
- delVideo(){ uni.showModal({
- title: "提示",
- content: "是否删除?",
- success: (res)=> {
- if (res.confirm) {
- this.videoUrl=null,
- this.duration=null,
- this.size= null,
- this.$emit("resultVideo", {
- url: this.videoUrl,
- size: this.size,
- duration: this.duration,
- });
- }}})
-
- },
- //上传凭证
- formDataGet() {
- let that = this;
- uni.request({
- //url: 'https://pm.lidashine.com/get-oss-sign', //oss获取参数接口地址。
- url: this.$mConfig.imgURL,
- complete: (result) => {
- let res = JSON.parse(result.data.data);
- that.ossData = res;
- },
- });
- },
-
- // 随机生成文件名
- random_string(len) {
- len = len || 32;
- var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
- var maxPos = chars.length;
- var pwd = "";
- for (let i = 0; i < len; i++) {
- pwd += chars.charAt(Math.floor(Math.random() * maxPos));
- }
- return pwd;
- },
- //上传图片
- upPhoto() {
- let that = this;
- uni.chooseVideo({
- count: 1,
- sourceType: ["camera", "album"],
- success: function (res) {
- // #ifdef H5
-
-
- if (res.tempFile.size > that.VideoSize * 1024 * 1024) {
- uni.showToast({
- title: `图片不能大于${that.VideoSize}M`,
- icon: "none",
- });
- return false;
- }
- // #endif
- // #ifdef APP-PLUS
- if (res.size > that.VideoSize * 1024 * 1024) {
- uni.showToast({
- title: `图片不能大于${that.VideoSize}M`,
- icon: "none",
- });
- return false;
- }
- // #endif
-
-
-
- (that.duration = res.duration),
- (that.size = res.size);
-
- that.updataImg(res.tempFile, res.tempFilePath);
-
-
- },
- });
- },
- updataImg(file, filePath) {
- let imgname = this.random_string(8) + "." + filePath.split(".").pop();
- let dir = "media/" + imgname;
- uni.showLoading();
- uni.uploadFile({
- // url: this.$mConfig.baseUrl+ '/minio/upload',
- url: this.$mConfig.baseUrl+ '/sys/oss/upload',
- filePath: filePath,
- fileType: "video",
- name: "file",
- success: (res) => {
- uni.hideLoading();
- if (res.statusCode != 200) {
- return;
- }
- let resObj = JSON.parse(res.data);
- this.videoUrl = resObj.data.url;
- this.$emit("resultVideo", {
- url: this.videoUrl,
- size: this.size,
- duration: this.duration,
- });
- uni.showToast({
- title: "上传成功",
- icon: "success",
- duration: 1000,
- });
- // alert(ossRes.host+"/"+encodeURIComponent(fileName));
- },
- fail: (err) => {
- uni.hideLoading();
- console.log("uploadImage fail", err);
- uni.showModal({
- content: err.errMsg,
- showCancel: false,
- });
- },
- });
- },
- },
- };
- </script>
- <style scoped>
-
- .w-100 {
- width: 100%;
- }
- .flex {
- /* 转为弹性盒模型*/
- display: flex;
- }
- .flex_bet {
- /* 两端左右*/
- display: flex;
- justify-content: space-between;
- }
- .flex_wrap {
- /* 转为弹性盒模型并自动换行*/
- display: flex;
- flex-wrap: wrap;
- }
- .flex_xy_center {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .upload-img-view {
- height: 200rpx;
- width: 32%;
- border-radius: 10rpx;
- border: 4rpx dotted #f1f1f1;
- /* background-color: #F1F1F1; */
- }
- .upload-img-view > image {
- width: 70rpx;
- height: 70rpx;
- }
- .upload-txt {
- font-size: 24rpx;
- color: #ffffff;
- }
- .imgs-view {
- border-radius: 10rpx;
- margin-right: 1.8%;
- margin-bottom: 16rpx;
- /* border: 1rpx solid #f1f1f1; */
- box-sizing: border-box;
- position: relative;
- }
- .result {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 45rpx;
- font-size: 26rpx;
- left: 0;
- background-color: rgba(0, 0, 0, 0.6);
- text-align: center;
- line-height: 45rpx;
- border-bottom-left-radius: 10rpx;
- border-bottom-right-radius: 10rpx;
- }
- .result > .success {
- color: #00b900;
- }
- .result > .error {
- color: #b52e25;
- }
- .uploading {
- position: absolute;
- background-color: rgba(0, 0, 0, 0.5);
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 100%;
- z-index: 999;
- }
- .uploading image {
- width: 60rpx;
- height: 60rpx;
- z-index: 1000;
- animation: rotation 0.6s linear infinite;
- -moz-animation: rotation 0.6s linear infinite;
- -webkit-animation: rotation 0.6s linear infinite;
- -o-animation: rotation 0.6s linear infinite;
- }
- @keyframes rotation {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- }
- }
- .imgs-view > image {
- width: 100%;
- height: 100%;
- border-radius: 10rpx;
- }
- .imgupload__tip {
- font-size: 24rpx;
- color: #ff0000;
- margin: 10rpx auto;
- }
- .imgupload__tip > label {
- color: #009100;
- }
- .del-btn {
- position: absolute;
- color: #ffffff;
- width: 34rpx;
- height: 34rpx;
- background-color: #ef3124;
- border-radius: 50%;
- text-align: center;
- line-height: 34rpx;
- position: absolute;
- top: 244rpx;
- right: -54rpx;
- z-index: 999999
- }
- .del-btn > image {
- width: 100%;
- height: 100%;
- display: flex;
- }
- .css2 {
- border-style: solid;
- border-width: 0px 0px 100px 100px;
- border-color: transparent transparent blue transparent;
- width: 0px;
- height: 0px;
- }
- </style>
|