uploadFileMd5Push.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <style>
  2. </style>
  3. <style lang="scss">
  4. .md5-file {
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .md5-file .ant-upload-picture-card-wrapper {
  9. height: 100% !important;
  10. }
  11. .md5-file .ant-upload.ant-upload-select-picture-card {
  12. height: 100% !important;
  13. width: 100%;
  14. }
  15. </style>
  16. <template>
  17. <div class="upload-file md5-file">
  18. <a-upload
  19. name="file"
  20. :multiple="multiple"
  21. list-type="picture-card"
  22. class="avatar-uploader"
  23. action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/"
  24. :before-upload="beforeUpload"
  25. @change="handleChange"
  26. :accept="uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/jpg' : 'mp4')"
  27. :file-list="fileList"
  28. :remove="removeFile"
  29. @preview="handlePreview"
  30. :disabled="loadingElse || disabled"
  31. >
  32. <div v-if="fileList.length < fileCount || fileList.length < 1">
  33. <a-progress v-if="loadingElse" :percent="percent" :show-info="false" />
  34. <div>点击上传</div>
  35. </div>
  36. </a-upload>
  37. <!-- <div style="color: red" v-if="sizeCheck">
  38. {{ uploadType == 'image' ? '请上传jpg格式的图片,并且大小在2m之内' : '请上传mp4格式,大小在100m之内' }}
  39. </div> -->
  40. <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
  41. <img alt="example" style="width: 100%" :src="previewImage" v-if="uploadType == 'image'" />
  42. <video :src="previewImage" v-else style="width: 100%" controls="controls">您的浏览器不支持 video 标签。</video>
  43. </a-modal>
  44. </div>
  45. </template>
  46. <script>
  47. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  48. import { mapGetters } from 'vuex'
  49. import moment from 'moment'
  50. import BMF from 'browser-md5-file'
  51. import qs from 'qs'
  52. var COS = require('cos-js-sdk-v5')
  53. var cos = new COS({
  54. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  55. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
  56. })
  57. var i = 0
  58. const oneKB = 1024
  59. function getBase64(file) {
  60. return new Promise((resolve, reject) => {
  61. const reader = new FileReader()
  62. reader.readAsDataURL(file)
  63. reader.onload = () => resolve(reader.result)
  64. reader.onerror = (error) => reject(error)
  65. })
  66. }
  67. export default {
  68. name: 'upload-file',
  69. components: {},
  70. props: {
  71. uploadType: {
  72. //上传类型 值为 image/video,同时目录名称也是这样
  73. type: String,
  74. default() {
  75. return 'image'
  76. },
  77. },
  78. multiple: {
  79. // true 可以批量上传 false 不可以
  80. type: Boolean,
  81. default() {
  82. return true
  83. },
  84. },
  85. fileCount: {
  86. //最大上传数量
  87. type: Number,
  88. default() {
  89. return 10
  90. },
  91. },
  92. checkFile: {
  93. //返回promise方法,判读文件是否上传过,进行上传拦截
  94. type: Function,
  95. default() {
  96. return Promise.resolve()
  97. },
  98. },
  99. disabled: {
  100. type: Boolean,
  101. default() {
  102. return false
  103. },
  104. },
  105. value: {
  106. required: true,
  107. default() {
  108. return ''
  109. },
  110. },
  111. size: {
  112. type: Number,
  113. default() {
  114. if (this.sizeCheck) {
  115. if (this.uploadType == 'image') {
  116. return 2048
  117. } else {
  118. return 102400
  119. }
  120. }
  121. },
  122. },
  123. sizeCheck: {
  124. type: Boolean,
  125. default() {
  126. return true
  127. },
  128. },
  129. onOversize: {
  130. type: Function,
  131. default() {
  132. alert(`请选择${this.size}KB内的文件!`)
  133. },
  134. },
  135. },
  136. data() {
  137. return {
  138. fileList: [],
  139. loadingElse: false,
  140. imageUrl: '',
  141. percent: 0,
  142. previewVisible: false,
  143. previewImage: '',
  144. md5: '',
  145. }
  146. },
  147. filters: {},
  148. computed: {},
  149. mounted() {},
  150. watch: {
  151. // fileListAll
  152. // value: {
  153. // immediate: true,
  154. // handler(n, o) {
  155. // this.$nextTick(() => {
  156. // if (this.fileList && this.fileList.length == 0) {
  157. // if (typeof n == 'object') {
  158. // this.fileList = n.map((item, index) => {
  159. // return {
  160. // uid: index + 1,
  161. // name: index + 1,
  162. // status: 'done',
  163. // url: item,
  164. // }
  165. // })
  166. // } else {
  167. // if (n == '') {
  168. // this.fileList = []
  169. // } else {
  170. // this.fileList = [
  171. // {
  172. // uid: 1,
  173. // name: 1,
  174. // status: 'done',
  175. // url: n,
  176. // },
  177. // ]
  178. // }
  179. // }
  180. // } else {
  181. // if (n.length == 0 || n == '') {
  182. // this.clearAll()
  183. // }
  184. // }
  185. // })
  186. // },
  187. // deep: true,
  188. // },
  189. },
  190. methods: {
  191. handleCancel() {
  192. closeAllVideoFun()
  193. this.previewVisible = false
  194. },
  195. handleChange(info) {
  196. if (info.file.status === 'uploading') {
  197. this.loading = true
  198. return
  199. }
  200. if (info.file.status === 'done') {
  201. // Get this url from response in real world.
  202. getBase64(info.file.originFileObj, (imageUrl) => {
  203. this.imageUrl = imageUrl
  204. this.loading = false
  205. })
  206. }
  207. },
  208. removeFile(file) {
  209. // console.log(file)
  210. var index = this.fileList.findIndex((v) => v.uid === file.uid)
  211. this.fileList.splice(index, 1)
  212. this.$emit('removeUpload', file)
  213. },
  214. async handlePreview(file) {
  215. if (!file.url && !file.preview) {
  216. file.preview = await getBase64(file.originFileObj)
  217. }
  218. this.previewImage = file.url || file.preview
  219. this.previewVisible = true
  220. },
  221. beforeUpload(file) {
  222. this.percent = 0
  223. this.loadingElse = true
  224. const fileOvesize = file.size > this.size * oneKB
  225. // console.log(fileOvesize)
  226. if (fileOvesize && this.sizeCheck) {
  227. this.onOversize()
  228. this.loadingElse = false
  229. return
  230. } else {
  231. this.checkFile(file)
  232. .then((res) => {
  233. this.md5 = res
  234. this.cosUpload(file)
  235. })
  236. .catch(() => {
  237. this.loadingElse = false
  238. })
  239. return new Promise(function (resolve, reject) {
  240. reject()
  241. })
  242. }
  243. },
  244. clearAll() {
  245. this.fileList = []
  246. },
  247. cosUpload(file) {
  248. var that = this
  249. let date = new Date()
  250. let y = date.getFullYear()
  251. let MM = date.getMonth() + 1
  252. MM = MM < 10 ? '0' + MM : MM
  253. let d = date.getDate()
  254. d = d < 10 ? '0' + d : d
  255. var timeElse = new Date().getTime()
  256. var arr = file.name.split('.')
  257. var str = ''
  258. for (let i = 0; i < arr.length; i++) {
  259. if (i == arr.length - 1) {
  260. } else {
  261. if (i == arr.length - 2) {
  262. str += arr[i]
  263. } else {
  264. str += arr[i] + '.'
  265. }
  266. }
  267. }
  268. // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
  269. cos.putObject(
  270. {
  271. Bucket: 'media-1301855440',
  272. /* 必须 */
  273. Region: 'ap-chongqing',
  274. /* 存储桶所在地域,必须字段 */
  275. Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  276. /* 必须 */
  277. StorageClass: 'STANDARD',
  278. Body: file, // 上传文件对象
  279. onProgress: function (progressData) {
  280. //进度条方法
  281. that.percent = progressData.percent * 100
  282. },
  283. onTaskReady: function (tid) {
  284. // console.log('onTaskReady', tid);
  285. },
  286. onTaskStart: function (info) {
  287. //开始上传
  288. // console.log('onTaskStart', info);
  289. },
  290. },
  291. function (err, data) {
  292. if (err) {
  293. that.loadingElse = false
  294. that.$message.error('上传失败!!!' + err)
  295. return
  296. }
  297. // alert('成功')
  298. that.loadingElse = false
  299. if (that.fileList.length < that.fileCount) {
  300. that.fileList.push({
  301. uid: file.name,
  302. name: file.name,
  303. status: 'done',
  304. url: '//' + data.Location,
  305. })
  306. // that.$emit('overUpload', that.fileList.map(item => {
  307. // return item.url
  308. // }))
  309. that.$emit('overUpload', that.fileList)
  310. if (that.multiple) {
  311. that.$emit(
  312. 'update:value',
  313. that.fileList.map((item) => {
  314. return item.url
  315. })
  316. )
  317. } else {
  318. that.$emit(
  319. 'update:value',
  320. that.fileList.map((item) => {
  321. return { url: item.url, signature: that.md5 }
  322. })[0]
  323. )
  324. }
  325. } else {
  326. that.$message.error('上传已达上限' + that.fileCount + '张')
  327. }
  328. }
  329. )
  330. },
  331. },
  332. }
  333. </script>
  334. <style scoped>
  335. @import '~@assets/less/common.less';
  336. </style>