zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传图片采用素材管理

master
15386982806 2024-01-09 17:09:23 +08:00
parent 92b61a203f
commit c81eff58d3
1 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
manager/src/components/lili/upload-pic-input.vue
View File

@ -19,24 +19,24 @@
</div> </div>
</Poptip> </Poptip>
</Input> </Input>
<Button @click="handleCLickImg('storeLogo')">选择图片</Button>
<Upload <!--<Upload-->
:action="uploadFileUrl" <!--:action="uploadFileUrl"-->
:headers="accessToken" <!--:headers="accessToken"-->
:on-success="handleSuccess" <!--:on-success="handleSuccess"-->
:on-error="handleError" <!--:on-error="handleError"-->
:format="['jpg','jpeg','png','gif','bmp']" <!--:format="['jpg','jpeg','png','gif','bmp']"-->
accept=".jpg, .jpeg, .png, .gif, .bmp" <!--accept=".jpg, .jpeg, .png, .gif, .bmp"-->
:max-size="1024" <!--:max-size="1024"-->
:on-format-error="handleFormatError" <!--:on-format-error="handleFormatError"-->
:on-exceeded-size="handleMaxSize" <!--:on-exceeded-size="handleMaxSize"-->
:before-upload="beforeUpload" <!--:before-upload="beforeUpload"-->
:show-upload-list="false" <!--:show-upload-list="false"-->
ref="up" <!--ref="up"-->
class="upload" <!--class="upload"-->
> <!--&gt;-->
<Button :loading="loading" :size="size" :disabled="disabled">上传图片</Button> <!--<Button :loading="loading" :size="size" :disabled="disabled">上传图片</Button>-->
</Upload> <!--</Upload>-->
</div> </div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable> <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
@ -45,13 +45,22 @@
<Button @click="viewImage=false">关闭</Button> <Button @click="viewImage=false">关闭</Button>
</div> </div>
</Modal> </Modal>
<Modal width="1200px" v-model="picModalFlag">
<ossManage @callback="callbackSelected" ref="ossManage" />
</Modal>
</div> </div>
</template> </template>
<script> <script>
import { uploadFile } from "@/api/index"; import { uploadFile } from "@/api/index";
import ossManage from "@/views/sys/oss-manage/ossManage";
export default { export default {
name: "uploadPicInput", name: "uploadPicInput",
components: {
ossManage,
},
props: { props: {
value: String, value: String,
size: { size: {
@ -86,10 +95,26 @@ export default {
currentValue: this.value, // 当前值 currentValue: this.value, // 当前值
loading: false, // 加载状态 loading: false, // 加载状态
viewImage: false, // 预览图片modal viewImage: false, // 预览图片modal
uploadFileUrl: uploadFile // 上传地址 uploadFileUrl: uploadFile, // 上传地址
picModalFlag: false, // 图片选择器
selectedFormBtnName: "", // 点击图片绑定form
picIndex: "", // 存储身份证图片下标，方便赋值
}; };
}, },
methods: { methods: {
// 选择图片modal
handleCLickImg(val, index) {
this.$refs.ossManage.selectImage = true;
this.picModalFlag = true;
this.selectedFormBtnName = val;
this.picIndex = index;
},
// 图片回显
callbackSelected(val) {
this.picModalFlag = false;
this.currentValue = val.url;
this.picIndex = "";
},
// 初始化 // 初始化
init() { init() {
this.accessToken = { this.accessToken = {
@ -125,6 +150,7 @@ export default {
this.loading = false; this.loading = false;
if (res.success) { if (res.success) {
this.currentValue = res.result; this.currentValue = res.result;
console.log('this.currentValue', this.currentValue);
this.$emit("input", this.currentValue); this.$emit("input", this.currentValue);
this.$emit("on-change", this.currentValue); this.$emit("on-change", this.currentValue);
} else { } else {