uploadFileMd5Push.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  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. accountId: '',
  146. }
  147. },
  148. filters: {},
  149. computed: {},
  150. mounted() {},
  151. watch: {
  152. // fileListAll
  153. // value: {
  154. // immediate: true,
  155. // handler(n, o) {
  156. // this.$nextTick(() => {
  157. // if (this.fileList && this.fileList.length == 0) {
  158. // if (typeof n == 'object') {
  159. // this.fileList = n.map((item, index) => {
  160. // return {
  161. // uid: index + 1,
  162. // name: index + 1,
  163. // status: 'done',
  164. // url: item,
  165. // }
  166. // })
  167. // } else {
  168. // if (n == '') {
  169. // this.fileList = []
  170. // } else {
  171. // this.fileList = [
  172. // {
  173. // uid: 1,
  174. // name: 1,
  175. // status: 'done',
  176. // url: n,
  177. // },
  178. // ]
  179. // }
  180. // }
  181. // } else {
  182. // if (n.length == 0 || n == '') {
  183. // this.clearAll()
  184. // }
  185. // }
  186. // })
  187. // },
  188. // deep: true,
  189. // },
  190. },
  191. methods: {
  192. handleCancel() {
  193. closeAllVideoFun()
  194. this.previewVisible = false
  195. },
  196. handleChange(info) {
  197. if (info.file.status === 'uploading') {
  198. this.loading = true
  199. return
  200. }
  201. if (info.file.status === 'done') {
  202. // Get this url from response in real world.
  203. getBase64(info.file.originFileObj, (imageUrl) => {
  204. this.imageUrl = imageUrl
  205. this.loading = false
  206. })
  207. }
  208. },
  209. removeFile(file) {
  210. // console.log(file)
  211. var index = this.fileList.findIndex((v) => v.uid === file.uid)
  212. this.fileList.splice(index, 1)
  213. this.$emit('removeUpload', file)
  214. },
  215. async handlePreview(file) {
  216. if (!file.url && !file.preview) {
  217. file.preview = await getBase64(file.originFileObj)
  218. }
  219. this.previewImage = file.url || file.preview
  220. this.previewVisible = true
  221. },
  222. beforeUpload(file) {
  223. this.percent = 0
  224. this.loadingElse = true
  225. const fileOvesize = file.size > this.size * oneKB
  226. // console.log(fileOvesize)
  227. if (fileOvesize && this.sizeCheck) {
  228. this.onOversize()
  229. this.loadingElse = false
  230. return
  231. } else {
  232. this.checkFile(file)
  233. .then((res) => {
  234. this.md5 = res.md5
  235. this.accountId = res.accountId
  236. this.cosUpload(file)
  237. })
  238. .catch(() => {
  239. this.loadingElse = false
  240. })
  241. return new Promise(function (resolve, reject) {
  242. reject()
  243. })
  244. }
  245. },
  246. clearAll() {
  247. this.fileList = []
  248. },
  249. cosUpload(file) {
  250. var that = this
  251. let date = new Date()
  252. let y = date.getFullYear()
  253. let MM = date.getMonth() + 1
  254. MM = MM < 10 ? '0' + MM : MM
  255. let d = date.getDate()
  256. d = d < 10 ? '0' + d : d
  257. var timeElse = new Date().getTime()
  258. var arr = file.name.split('.')
  259. var str = ''
  260. for (let i = 0; i < arr.length; i++) {
  261. if (i == arr.length - 1) {
  262. } else {
  263. if (i == arr.length - 2) {
  264. str += arr[i]
  265. } else {
  266. str += arr[i] + '.'
  267. }
  268. }
  269. }
  270. // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
  271. cos.putObject(
  272. {
  273. Bucket: 'media-1301855440',
  274. /* 必须 */
  275. Region: 'ap-chongqing',
  276. /* 存储桶所在地域,必须字段 */
  277. Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  278. /* 必须 */
  279. StorageClass: 'STANDARD',
  280. Body: file, // 上传文件对象
  281. onProgress: function (progressData) {
  282. //进度条方法
  283. that.percent = progressData.percent * 100
  284. },
  285. onTaskReady: function (tid) {
  286. // console.log('onTaskReady', tid);
  287. },
  288. onTaskStart: function (info) {
  289. //开始上传
  290. // console.log('onTaskStart', info);
  291. },
  292. },
  293. function (err, data) {
  294. if (err) {
  295. that.loadingElse = false
  296. that.$message.error('上传失败!!!' + err)
  297. return
  298. }
  299. // alert('成功')
  300. that.loadingElse = false
  301. if (that.fileList.length < that.fileCount) {
  302. that.fileList.push({
  303. uid: file.name,
  304. name: file.name,
  305. status: 'done',
  306. url: '//' + data.Location,
  307. })
  308. // that.$emit('overUpload', that.fileList.map(item => {
  309. // return item.url
  310. // }))
  311. that.$emit('overUpload', that.fileList)
  312. if (that.multiple) {
  313. that.$emit(
  314. 'update:value',
  315. that.fileList.map((item) => {
  316. return item.url
  317. })
  318. )
  319. } else {
  320. that.$emit(
  321. 'update:value',
  322. that.fileList.map((item) => {
  323. return { url: item.url, signature: that.md5 }
  324. })[0]
  325. )
  326. }
  327. } else {
  328. that.$message.error('上传已达上限' + that.fileCount + '张')
  329. }
  330. }
  331. )
  332. },
  333. },
  334. }
  335. </script>
  336. <style scoped>
  337. @import '~@assets/less/common.less';
  338. </style>