uploadFile.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view class="upBox">
  3. <uni-file-picker
  4. limit="3"
  5. fileMediatype="image"
  6. file-extname="jpg,jpeg,png"
  7. @select="picSelect"
  8. @success="picSuccess"
  9. @fail="picFail"
  10. @delete="picDelete"
  11. title="最多选择3张图片">
  12. </uni-file-picker>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. name:"uploadFile",
  18. props: {
  19. module: {
  20. type: String,
  21. default: "",
  22. }
  23. },
  24. data() {
  25. return {
  26. attaments:[]
  27. };
  28. },
  29. methods: {
  30. //选择图片,上传
  31. picSelect(e){
  32. let that = this;
  33. const tempFilePaths = e.tempFilePaths;
  34. console.log(tempFilePaths);
  35. uni.showLoading({
  36. title: "图片上传中"
  37. });
  38. uni.uploadFile({
  39. url: that.apiWebUrl + '/data/doc/add',
  40. filePath: tempFilePaths[0],
  41. name: 'file',
  42. formData: {
  43. module: this.module
  44. },
  45. success: (res) => {
  46. let info = JSON.parse(res.data);
  47. uni.hideLoading();
  48. console.log(info);
  49. that.attaments.push(info.data);
  50. that.$emit("getUpFlie",that.attaments);
  51. },
  52. fail: () => {
  53. uni.hideLoading();
  54. uni.showToast("图片上传失败!");
  55. },
  56. });
  57. },
  58. //上传成功
  59. picSuccess(){
  60. uni.showToast({
  61. icon:'none',
  62. title: '上传成功',
  63. duration: 2000
  64. });
  65. },
  66. //上传失败
  67. picFail(){
  68. uni.showToast({
  69. icon:'none',
  70. title: '上传失败,请重新上传!',
  71. duration: 2000
  72. });
  73. },
  74. //删除图片
  75. picDelete(e){
  76. console.log(e);
  77. },
  78. },
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. .upBox{
  83. width: 100%;
  84. display: block;
  85. }
  86. </style>