邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

273 line
7.6 KiB

  1. <template>
  2. <div class="uploder">
  3. <div class="change-photo-setter">
  4. <van-uploader class="sett-item" :before-read="beforeRead">
  5. <div style="height: 100%"><img :src="ImgUrl" alt="" /></div>
  6. <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" />
  7. </van-uploader>
  8. </div>
  9. <div class="uploadava">
  10. <van-popup
  11. duration="0"
  12. v-model="showCropper"
  13. position="top"
  14. :style="{ height: '100%' }"
  15. >
  16. <div class="cropper-container">
  17. <van-loading
  18. v-show="loadingShow"
  19. size="50"
  20. color="#fff"
  21. vertical
  22. text-color="#fff"
  23. >上传中...</van-loading
  24. >
  25. <vueCropper
  26. ref="cropper"
  27. :img="option.img"
  28. :outputSize="option.outputSize"
  29. :outputType="option.outputType"
  30. :info="option.info"
  31. :full="option.full"
  32. :autoCropWidth="option.autoCropWidth"
  33. :autoCropHeight="option.autoCropHeight"
  34. :canMove="option.canMove"
  35. :canMoveBox="option.canMoveBox"
  36. :original="option.original"
  37. :autoCrop="option.autoCrop"
  38. :fixed="option.fixed"
  39. :fixedNumber="option.fixedNumber"
  40. :centerBox="option.centerBox"
  41. :infoTrue="option.infoTrue"
  42. :fixedBox="option.fixedBox"
  43. :high="option.high"
  44. :mode="option.mode"
  45. />
  46. <van-nav-bar
  47. left-text="取消"
  48. right-text="选择"
  49. @click-left="onClickLeft"
  50. @click-right="onClickRight"
  51. />
  52. </div>
  53. </van-popup>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. import { awsImgUpload } from '@/api/editModel'
  59. import { Toast } from 'vant'
  60. import { VueCropper } from 'vue-cropper'
  61. export default {
  62. name: 'uploadAva',
  63. components: {
  64. VueCropper
  65. },
  66. props: {
  67. showAta: {
  68. default: false,
  69. type: Boolean
  70. },
  71. avaUrl: {
  72. default: '',
  73. type: String
  74. }
  75. },
  76. data() {
  77. return {
  78. ImgUrl: '',
  79. show: true, // 上传类型的弹窗
  80. imageFileName: '',
  81. showCropper: false, // 裁剪的弹窗
  82. option: {
  83. img: '',
  84. outputSize: 0.8,
  85. info: false, // 裁剪框的大小信息
  86. outputType: 'jpeg', // 裁剪生成图片的格式
  87. canScale: true, // 图片是否允许滚轮缩放
  88. autoCrop: true, // 是否默认生成截图框
  89. autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度
  90. autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度
  91. high: true, // 是否按照设备的dpr 输出等比例图片
  92. fixedBox: false, // 固定截图框大小 不允许改变
  93. fixed: true, // 是否开启截图框宽高固定比例
  94. fixedNumber: [1, 1], // 截图框的宽高比例
  95. full: true, // 是否输出原图比例的截图
  96. canMoveBox: true, // 截图框能否拖动
  97. original: false, // 上传图片按照原始比例渲染
  98. centerBox: true, // 截图框是否被限制在图片里面
  99. infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  100. mode: '100% auto' // 图片默认渲染方式
  101. },
  102. loadingShow: false // 是否展示loading
  103. }
  104. },
  105. methods: {
  106. beforeRead(file) {
  107. console.log(file)
  108. if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
  109. this.$toast('请上传 jpg/png 格式图片')
  110. return false
  111. }
  112. // console.log(111, file)
  113. this.showCropper = true
  114. this.imageToBase64(file)
  115. this.imageFileName = file.name
  116. },
  117. imageToBase64(file) {
  118. let reader = new FileReader()
  119. console.log(reader)
  120. reader.readAsDataURL(file)
  121. reader.onload = () => {
  122. this.option.img = reader.result
  123. }
  124. },
  125. onClickRight() {
  126. // let formData = new FormData()
  127. this.loadingShow = true
  128. console.log(this.option)
  129. // const AccessToken = localStorage.getItem('AccessToken')
  130. // this.$axios({
  131. // method: 'post',
  132. // url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`,
  133. // headers: {
  134. // // 'Content-Type': 'application/json;charset=UTF-8',
  135. // 'content-type': 'multipart/form-data',
  136. // token: AccessToken,
  137. // 'Access-Control-Allow-Credentials': true
  138. // },
  139. // data: { file: this.option.img }
  140. // }).then((res) => {
  141. // console.log(res)
  142. // this.loadingShow = false
  143. // this.showCropper = false
  144. // Toast.success('上传成功')
  145. // })
  146. // this.pushImg({ file: this.option.img })
  147. // this.pushImg({ file: require('../assets/icon/icon-yes.png') })
  148. // this.$refs.cropper.getCropBlob((data) => {
  149. console.log(this.$refs.cropper)
  150. this.$refs.cropper.getCroppedCanvas((data) => {
  151. this.ImgUrl = data
  152. console.log(data, 'blob')
  153. // let blob = window.URL.createObjectURL(data)
  154. // console.log(blob)
  155. // formData.append('File', data, this.imageFileName)
  156. // formData.append('id', this.$store.getters.user.userId)
  157. // console.log(formData.getAll('File'))
  158. // console.log(data)
  159. // this.pushImg({ file: blob })
  160. // uploadAva(formData).then((res) => {
  161. // this.showCropper = false
  162. // this.$emit('update:showAta', false)
  163. // this.$emit('update:avaUrl', res.data)
  164. // })
  165. })
  166. // this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
  167. // const formData = new FormData()
  168. // formData.append('file', blob, 'avatar.png')
  169. // this.pushImg({ file: blob })
  170. // })
  171. },
  172. onClickLeft() {
  173. this.loadingShow = false
  174. this.showCropper = false
  175. this.$parent.showPhotoUploader = false
  176. },
  177. // 上传图片
  178. async pushImg(data) {
  179. try {
  180. const res = await awsImgUpload(data)
  181. this.loadingShow = false
  182. this.showCropper = false
  183. Toast.success('上传成功')
  184. } catch (error) {
  185. console.log(error, 'error')
  186. Toast.fail(error.message)
  187. }
  188. }
  189. }
  190. }
  191. </script>
  192. <style lang="scss" scoped>
  193. // .uploder{
  194. // overflow: hidden;
  195. // }
  196. /deep/.cropper-view-box {
  197. outline: 2px dashed #fff !important;
  198. }
  199. /deep/.crop-point {
  200. background-color: auto !important;
  201. }
  202. /deep/.van-loading {
  203. position: absolute;
  204. // color: red;
  205. z-index: 9999;
  206. left: 50%;
  207. top: 50%;
  208. margin-left: -55px;
  209. margin-top: -30px;
  210. background: rgba(0, 0, 0, 0.3);
  211. padding: 10px 30px;
  212. border-radius: 25px;
  213. }
  214. .uploadava {
  215. .update-avatar {
  216. height: 100%;
  217. text-align: center;
  218. .update-avatar-line {
  219. width: 100%;
  220. height: 1px;
  221. background-color: #979797;
  222. }
  223. .avatar-select-type {
  224. background-color: #fff;
  225. width: 346px;
  226. border-radius: 12px;
  227. padding-bottom: 4px;
  228. .upload-avator {
  229. padding: 14px;
  230. }
  231. }
  232. p {
  233. margin: 15px 0 30px;
  234. background-color: #fff;
  235. width: 346px;
  236. border-radius: 12px;
  237. padding: 15px 0 18px;
  238. }
  239. }
  240. .cropper-container {
  241. height: 94vh;
  242. .van-nav-bar {
  243. background-color: rgba(0, 0, 0, 0.87);
  244. :global(.van-nav-bar__text) {
  245. color: #fff;
  246. // font-size: $font-size-normal-x;
  247. }
  248. :global(.van-nav-bar__text:nth-child(2)) {
  249. color: #000;
  250. font-weight: 500;
  251. }
  252. // :global(.van-icon) {
  253. // color: red;
  254. // }
  255. }
  256. }
  257. .vue-cropper {
  258. background: #000;
  259. height: 100%;
  260. padding-top: 46px;
  261. box-sizing: border-box;
  262. }
  263. }
  264. </style>