抖音小程序发布平台
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

256 righe
7.8 KiB

  1. <template>
  2. <div style="margin-top:10px">
  3. <div class="coverText">1.裁剪图片,图片大小需在2M以内.</div>
  4. <div class="coverText">2.鼠标滚轮可以伸缩图片展示区大小.</div>
  5. <div class="coverText" style="margin-bottom:5px;">{{information}}</div>
  6. <div class="contianer">
  7. <vueCropper ref="cropper" :img="option.img" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
  8. :autoCropHeight="option.autoCropHeight" :canScale="option.canScale" :outputSize="option.size"
  9. :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
  10. :fixedBox="option.fixedBox" :original="option.original" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
  11. @realTime="realTime">
  12. </vueCropper>
  13. </div>
  14. <div class="buttonBox"></div>
  15. <span class="input-file">请选择
  16. <input class="choiceImg" type="file" name="file" @change="changeEt" value="1" />
  17. </span>
  18. <!-- <div class="finish" @click="finish('blob')">保存图片</div> -->
  19. <el-button class="finish" :loading="submitButton" type="primary" @click="finish('blob')">保存图片</el-button>
  20. <span class="msg">{{msg}}</span>
  21. </div>
  22. </template>
  23. <script>
  24. import AjaxUtil from "../../../core/tool/ajaxService";
  25. import vueCropper from 'vue-cropper'
  26. export default {
  27. components: {
  28. vueCropper
  29. },
  30. props: ["fname", "url", "completedCallback", "vtype", "option"],
  31. name: "FileUpload",
  32. // props: {
  33. // viewImg: {
  34. // url: {
  35. // type: String,
  36. // default: ''
  37. // },
  38. // scale: {
  39. // type: Number,
  40. // default: 1 / 1
  41. // },
  42. // label: {
  43. // type: String,
  44. // default: ''
  45. // }
  46. // }
  47. // },
  48. data() {
  49. return {
  50. submitButton:false,
  51. msg:"",
  52. information:'',
  53. imgUrl: '',
  54. // option: {
  55. // img: '',
  56. // size: 1,
  57. // full: false,
  58. // outputType: 'png',
  59. // canMove: true,
  60. // fixedBox: false,
  61. // original: false,
  62. // canMoveBox: false,
  63. // canScale: false,
  64. // autoCrop: true,
  65. // autoCropWidth: 200,
  66. // autoCropHeight: 200,
  67. // // // 开启宽度和高度比例
  68. // fixed: true,
  69. // fixedNumber: [1, 1]
  70. // },
  71. crap: false,
  72. previews: {},
  73. files: ''
  74. }
  75. },
  76. methods: {
  77. changeEt: function (e) {
  78. var file = e.target.files[0]
  79. if (!file) return;
  80. if (/^image\/\w+$/.test(file.type)) {
  81. let uploadedImageURL = URL.createObjectURL(file);
  82. this.files = file
  83. this.option.img = uploadedImageURL;
  84. }
  85. },
  86. // 实时预览函数
  87. realTime(data) {
  88. this.previews = data
  89. console.log( JSON.stringify(this.option))
  90. if(this.option.propertion=='4/3'){
  91. this.information = '3.宽高比约4:3效果最佳(例:宽800px,高600px)'
  92. }else if(this.option.propertion=='1/1'){
  93. this.information = '3.宽高比约1:1效果最佳(例:宽400px,高400px)'
  94. }else if(this.option.propertion=='8/3'){
  95. this.information = '3.宽高比约8:3效果最佳(例:宽800px,高300px)'
  96. }
  97. },
  98. changeImg() {
  99. this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
  100. },
  101. startCrop() {
  102. // start
  103. this.crap = true
  104. this.$refs.cropper.startCrop()
  105. },
  106. stopCrop() {
  107. // stop
  108. this.crap = false
  109. this.$refs.cropper.stopCrop()
  110. },
  111. clearCrop() {
  112. // clear
  113. this.$refs.cropper.clearCrop()
  114. },
  115. finish(type) {
  116. this.$refs.cropper.getCropBlob((data) => {
  117. let blob = data
  118. let formData = new FormData()
  119. formData.append('file', blob, this.files.name)
  120. this.msg = '',
  121. this.submitButton = true;
  122. this.uploadFetch(this.url, formData).then((result) => {
  123. this.submitButton = false;
  124. this.$message.success('保存成功');
  125. this.showLoading = false;
  126. this.completedCallback({
  127. success: true,
  128. data: result
  129. });
  130. }).catch((err) => {
  131. this.submitButton = false;
  132. this.msg = "上传失败,图片超2M或上传超时";
  133. this.completedCallback({
  134. success: false,
  135. data: err
  136. });
  137. });
  138. })
  139. }
  140. },
  141. mounted() {
  142. }
  143. }
  144. </script>
  145. <style scoped>
  146. .msg{
  147. margin-top: 38px;
  148. display: block;
  149. color: red;
  150. font-size: 12px;
  151. }
  152. img{
  153. max-width: 100%;
  154. }
  155. .buttonBox{
  156. overflow: hidden;
  157. }
  158. .contianer {
  159. width: 375px;
  160. height: 200px;
  161. position: relative;
  162. border-radius: 4px;
  163. }
  164. .show-preview {
  165. position: absolute;
  166. left: 405px;
  167. bottom: 0px;
  168. background-color: white;
  169. border-radius: 4px;
  170. color: #2c7;
  171. }
  172. .show-text {
  173. position: absolute;
  174. left: 0;
  175. top: -30px;
  176. font-size: 14px;
  177. color: #333;
  178. width: 200px;
  179. }
  180. .imgFile {
  181. cursor: pointer;
  182. }
  183. .input-file {
  184. float: left;
  185. position: relative;
  186. overflow: hidden;
  187. text-align: center;
  188. border: 1px #999 solid;
  189. background-color: #fff;
  190. border-radius: 4px;
  191. padding: 7px 10px;
  192. font-size: 12px;
  193. font-weight: normal;
  194. line-height: 24px;
  195. color: #fff;
  196. text-decoration: none;
  197. display: block;
  198. width: 120px;
  199. color: #666;
  200. margin: 20px 20px 0 0;
  201. }
  202. .input-file input[type="file"] {
  203. cursor: pointer;
  204. position: absolute;
  205. height: 38px;
  206. display: block;
  207. top: 0;
  208. right: 0;
  209. font-size: 14px;
  210. background-color: #f00;
  211. /*transform: translate(-300px, 0px) scale(4);*/
  212. /* height: 100%;
  213. width: 100%; */
  214. opacity: 0;
  215. filter: alpha(opacity=0);
  216. }
  217. .finish {
  218. float: left;
  219. margin-top: 20px;
  220. margin-right: 20px;
  221. width: 120px;
  222. height: 40px;
  223. font-size: 12px;
  224. background-color: #2c7;
  225. text-align: center;
  226. color: white;
  227. border-radius: 4px;
  228. cursor: pointer;
  229. border: 1px #2c7 solid;
  230. }
  231. .coverText {
  232. font-size: 12px !important;
  233. color: #999 !important;
  234. font-weight: lighter;
  235. height: 20px;
  236. line-height: 20px;
  237. }
  238. </style>
  239. <style>
  240. .crop-info[data-v-7b077dd1]{
  241. display: none;
  242. }
  243. </style>
  244. <!-- Add "scoped" attribute to limit CSS to this component only -->