JImageUpload.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <div class="img">
  3. <a-upload
  4. name="file"
  5. listType="picture-card"
  6. :multiple="isMultiple"
  7. :action="uploadAction"
  8. :headers="headers"
  9. :data="{biz:bizPath}"
  10. :fileList="fileList"
  11. :beforeUpload="beforeUpload"
  12. :disabled="disabled"
  13. :isMultiple="isMultiple"
  14. :showUploadList="isMultiple"
  15. @change="handleChange"
  16. @preview="handlePreview"
  17. :class="!isMultiple?'imgupload':''">
  18. <img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="height:104px;max-width:300px"/>
  19. <div v-else class="iconp">
  20. <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
  21. <div class="ant-upload-text">{{ text }}</div>
  22. </div>
  23. <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
  24. <img alt="example" style="width: 100%" :src="previewImage"/>
  25. </a-modal>
  26. </a-upload>
  27. </div>
  28. </template>
  29. <script>
  30. import Vue from 'vue'
  31. import { ACCESS_TOKEN } from "@/store/mutation-types"
  32. import { getFileAccessHttpUrl } from '@/api/manage'
  33. const uidGenerator=()=>{
  34. return '-'+parseInt(Math.random()*10000+1,10);
  35. }
  36. const getFileName=(path)=>{
  37. if(path.lastIndexOf("\\")>=0){
  38. let reg=new RegExp("\\\\","g");
  39. path = path.replace(reg,"/");
  40. }
  41. return path.substring(path.lastIndexOf("/")+1);
  42. }
  43. export default {
  44. name: 'JImageUpload',
  45. data(){
  46. return {
  47. uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
  48. uploadLoading:false,
  49. picUrl:false,
  50. headers:{},
  51. fileList: [],
  52. previewImage:"",
  53. previewVisible: false,
  54. }
  55. },
  56. props:{
  57. text:{
  58. type:String,
  59. required:false,
  60. default:"上传"
  61. },
  62. /*这个属性用于控制文件上传的业务路径*/
  63. bizPath:{
  64. type:String,
  65. required:false,
  66. default:"temp"
  67. },
  68. value:{
  69. type:[String,Array],
  70. required:false
  71. },
  72. disabled:{
  73. type:Boolean,
  74. required:false,
  75. default: false
  76. },
  77. isMultiple:{
  78. type:Boolean,
  79. required:false,
  80. default: false
  81. }
  82. },
  83. watch:{
  84. value(val){
  85. if (val instanceof Array) {
  86. this.initFileList(val.join(','))
  87. } else {
  88. this.initFileList(val)
  89. }
  90. if(!val || val.length==0){
  91. this.picUrl = false;
  92. }
  93. }
  94. },
  95. created(){
  96. const token = Vue.ls.get(ACCESS_TOKEN);
  97. this.headers = {"X-Access-Token":token}
  98. },
  99. methods:{
  100. initFileList(paths){
  101. if(!paths || paths.length==0){
  102. this.fileList = [];
  103. return;
  104. }
  105. this.picUrl = true;
  106. let fileList = [];
  107. let arr = paths.split(",")
  108. for(var a=0;a<arr.length;a++){
  109. let url = getFileAccessHttpUrl(arr[a]);
  110. fileList.push({
  111. uid: uidGenerator(),
  112. name: getFileName(arr[a]),
  113. status: 'done',
  114. url: url,
  115. response:{
  116. status:"history",
  117. message:arr[a]
  118. }
  119. })
  120. }
  121. this.fileList = fileList
  122. },
  123. beforeUpload: function(file){
  124. var fileType = file.type;
  125. if(fileType.indexOf('image')<0){
  126. this.$message.warning('请上传图片');
  127. return false;
  128. }
  129. },
  130. handleChange(info) {
  131. this.picUrl = false;
  132. let fileList = info.fileList
  133. if(info.file.status==='done'){
  134. if(info.file.response.success){
  135. this.picUrl = true;
  136. fileList = fileList.map((file) => {
  137. if (file.response) {
  138. file.url = file.response.message;
  139. }
  140. return file;
  141. });
  142. }
  143. //this.$message.success(`${info.file.name} 上传成功!`);
  144. }else if (info.file.status === 'error') {
  145. this.$message.error(`${info.file.name} 上传失败.`);
  146. }else if(info.file.status === 'removed'){
  147. this.handleDelete(info.file)
  148. }
  149. this.fileList = fileList
  150. if(info.file.status==='done' || info.file.status === 'removed'){
  151. this.handlePathChange()
  152. }
  153. },
  154. // 预览
  155. handlePreview (file) {
  156. this.previewImage = file.url || file.thumbUrl
  157. this.previewVisible = true
  158. },
  159. getAvatarView(){
  160. if(this.fileList.length>0){
  161. let url = this.fileList[0].url
  162. return getFileAccessHttpUrl(url)
  163. }
  164. },
  165. handlePathChange(){
  166. let uploadFiles = this.fileList
  167. let path = ''
  168. if(!uploadFiles || uploadFiles.length==0){
  169. path = ''
  170. }
  171. let arr = [];
  172. if(!this.isMultiple){
  173. arr.push(uploadFiles[uploadFiles.length-1].response.message)
  174. }else{
  175. for(let a=0;a<uploadFiles.length;a++){
  176. // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
  177. if(uploadFiles[a].status === 'done' ) {
  178. arr.push(uploadFiles[a].response.message)
  179. }else{
  180. return;
  181. }
  182. // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
  183. }
  184. }
  185. if(arr.length>0){
  186. path = arr.join(",")
  187. }
  188. this.$emit('change', path);
  189. },
  190. handleDelete(file){
  191. //如有需要新增 删除逻辑
  192. console.log(file)
  193. },
  194. handleCancel() {
  195. this.close();
  196. this.previewVisible = false;
  197. },
  198. close () {
  199. },
  200. },
  201. model: {
  202. prop: 'value',
  203. event: 'change'
  204. }
  205. }
  206. </script>
  207. <style scoped>
  208. /* update--begin--autor:lvdandan-----date:20201016------for:j-image-upload图片组件单张图片详情回显空白
  209. * https://github.com/zhangdaiscott/jeecg-boot/issues/1810
  210. * https://github.com/zhangdaiscott/jeecg-boot/issues/1779
  211. */
  212. /deep/ .imgupload .ant-upload-select{display:block}
  213. /deep/ .imgupload .ant-upload.ant-upload-select-picture-card{ width:120px;height: 120px;}
  214. /deep/ .imgupload .iconp{padding:32px;}
  215. /* update--end--autor:lvdandan-----date:20201016------for:j-image-upload图片组件单张图片详情回显空白*/
  216. </style>